Использование хука useState для управления состоянием в React

В моем предыдущем посте Props vs State in React упоминалась необходимость использования компонентов класса для управления состоянием в React до того, как были добавлены хуки. В этом посте показано, как хук setState можно использовать в функциональных компонентах для управления состоянием с момента его добавления в выпуск React 16.8.0 в феврале 2019 года.

Хуки были введены в React для упрощения компонентов. Они позволяют получить доступ к функциям состояния и жизненного цикла React без использования компонентов класса. Вы можете создавать свои собственные хуки для повторного использования поведения с отслеживанием состояния, но этот пост будет посвящен одному из встроенных хуков. По соглашению они начинаются с «use».

ГОСУДАРСТВЕННЫЙ КРЮК

Встроенный хук для добавления локального состояния к компоненту и сохранения его посредством повторного рендеринга — useState.

В приведенном ниже примере хук useState используется для установки начального состояния для name. Этот аргумент начального состояния будет использоваться только при первом рендеринге компонента.

вы можете видеть, что name и setName объявлены вместе как связанные переменные. useState возвращает как текущее значение состояния, так и функцию, позволяющую обновить его. Его можно рассматривать как this.setState, и его можно аналогичным образом вызывать из обработчика событий.

Основное различие между useState и this.setState заключается в том, что useState заменяет старое состояние; он не объединяет старое и новое состояние вместе. Если у вас есть другая несвязанная переменная, которую вы хотите отслеживать как состояние, вы можете объявить ее рядом с первой в верхней части функции и получить к ней доступ напрямую по имени переменной, а не собирать их вместе и получать доступ через одно состояние. объект.

Вызов setName или setDiscovery заставит React повторно отобразить этот компонент.

ПРАВИЛА ПОЛЬЗОВАНИЯ КРЮЧКАМИ

Важно размещать хуки на верхнем уровне ваших функциональных компонентов. Это позволит React надежно сохранять состояние при повторном рендеринге.

Хуки можно использовать в пользовательских хуках. См. документацию React для получения дополнительной информации об этом.

БОЛЬШЕ ИНФОРМАЦИИ

Для получения более подробной информации об использовании хуков ознакомьтесь с документацией React по хукам здесь.

Посмотрите мой пост Props vs State in React.

Я постоянно совершенствуюсь. Если у вас есть исправления или отзывы, я был бы рад узнать и внести исправления. Спасибо!