Как обновить страницу в React

год назад·1 мин. на чтение

В этой статье рассмотрим как обновить страницу (сделать refresh страницы) и как обновить отдельный компонент в React.

Как обновить страницу

Чтобы обновить страницу (сделать refresh страницы), нам нужно использовать метод window.location.reload() в React. По умолчанию этот метод перезагружает страницу из кэша, если мы передаем true в качестве аргумента, он перезагружает всю страницу с сервера, а не с кэша. Рассмотрим пример:
import React from "react";

function Home() {
  const refreshPage = ()=>{
     window.location.reload();
  }

  return (
    <div>
      <h1>{Math.random()}</h1>
      <button onClick={refreshPage}>Refresh</button>
    </div>
  );
}
В приведенном выше коде мы обновляем страницу, нажимая на кнопку refresh.

Обновление компонента

Если требуется обновить конкретный компонент, а не всю страницу, необходимо вызвать метод this.setState() с пустым объектом для классовых компонентов.
import React from "react";

class App extends React.Component {

  handleRefresh = () => {
    // вызов этого метода вызовет ререндер компонента
    this.setState({});
  };

  render() {
    return (
      <div>
        <h1>{Math.random()}</h1>
        <button onClick={this.handleRefresh}>Refresh component</button>
      </div>
    );
  }
}

export default App;
Передав пустой объект {} в функцию изменения состояния, react будет думать, что что-то обновлено в состоянии, и компонент необходимо обновить (или повторно отобразить) с новым UI.

Обновление компонента с помощью хуков

В react hooks мы можем использовать useState() для обновления компонента.
import {useState} from "react";

function Home() {

  const [value,setValue] = useState();

  const refresh = ()=>{
      // это вызовет ререндеринг компонента
     setValue({});
  }

  return (
    <div>
      <p>{Math.random()}</p>
      <button onClick={refresh}>Refresh component</button>
    </div>
  );
}

Настройка редактора IDE для работы с React

9 месяцев назад·2 мин. на чтение

Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.

Содержание туториала по React Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.

Выбор редактора кода

VS Code — один из самых популярных редакторов, используемых сегодня. Он имеет большой маркет с расширениями и хорошо интегрируется с популярными сервисами, такими как GitHub. Большинство функций, перечисленных ниже, также можно добавить в VS Code в качестве расширений, что делает его легко настраиваемым! Другие популярные текстовые редакторы, используемые в сообществе React:
  • WebStorm — это интегрированная среда разработки (IDE), разработанная специально для JavaScript.
  • Sublime Text имеет поддержку JSX и TypeScript, встроенную подсветку синтаксиса и автозаполнение.
  • Vim — это текстовый редактор с широкими возможностями настройки, созданный для эффективного создания и изменения любого типа текста. Он включен как «vi» в большинство UNIX систем и в Apple OS X.

Рекомендуемые функции редактора кода

Некоторые редакторы поставляются со встроенными функциями, но для других может потребоваться добавление расширения.

Линтинг

Линтеры находят проблемы в коде по мере его написания, помогая вам исправить их на ранней стадии. ESLint — популярный линтер с открытым исходным кодом для JavaScript. Убедитесь, что вы включили все правила eslint-plugin-react-hooks для своего проекта. Они необходимы и выявляют самые серьезные ошибки на ранней стадии. Рекомендуемый пресет (preset) eslint-config-react-app уже включает их.

Форматирование кода

Prettier очистит ваш код, переформатировав его, чтобы он соответствовал предустановленным настраиваемым правилам. Запустите Prettier, и все ваши табы будут преобразованы в пробелы, а ваши отступы, кавычки и т. д. также будут изменены в соответствии с конфигурацией. В идеальной настройке Prettier будет запускаться, когда вы сохраняете файл, быстро внося эти изменения за вас. Вы можете установить расширение Prettier в VS Code, выполнив следующие действия:
  1. Запустить VS Code
  2. Используйте быстрое открытие (нажмите Ctrl/Cmd+P)
  3. Вставьте в ext install esbenp.prettier-vscode
  4. Нажмите Enter

Форматирование при сохранении

В идеале вы должны форматировать свой код при каждом сохранении. В VS Code есть настройки для этого.
  1. В VS Code нажмите Ctrl/Cmd + Shift + P.
  2. Напишите "settings"
  3. Нажмите Enter
  4. В строке поиска введите "format on save".
  5. Убедитесь, что опция "format on save" отмечена галочкой.
Если в вашем пресете ESLint есть правила форматирования, они могут конфликтовать с Prettier. Мы рекомендуем отключить все правила форматирования в пресете ESLint с помощью eslint-config-prettier, чтобы ESLint использовался только для отлова логических ошибок. Если вы хотите принудительно отформатировать файлы перед слиянием пулл ревеста, используйте prettier --check для непрерывной интеграции (Continuous Integration, CI).