Что такое состояние использования?
Хук useState — самый популярный и широко используемый хук в React. Это позволяет вам иметь состояние в функциональном компоненте. До появления хука useState (React 16.8 🎉) вы могли иметь состояние только в компонентах на основе классов 😭.
Как ты это используешь?
useState — это функция.
Эта функция возвращает две вещи: состояние и функцию для обновления этого состояния. Обычно вы получаете доступ к ним через деструктурирование массива.
Вы можете передать этой функции начальное состояние.
Это начальное состояние может быть чем угодно: числом, логическим значением, строкой… Это может быть даже функция, возвращающая начальное состояние.
Примечание. Эта функция будет вызываться только при первоначальном рендеринге. Не каждый раз, когда состояние обновляется или при каждом повторном рендеринге. Так что иметь более дорогую функцию здесь нормально, если она вам нужна.
Мы воспользуемся классическим контрпримером. Таким образом, начальное состояние будет 0.
Хорошей практикой является называть состояние (и setState) чем-то, что ссылается на это состояние. Поскольку мы используем наше состояние в качестве счетчика, мы назовем наш счетчик состояний (и нашу функцию обновления setCount).
Доступ к состоянию
Мы можем получить доступ к нашему состоянию в нашем компоненте, просто используя константную переменную, которую мы присвоили нашему состоянию. В нашем случае посчитайте.
Это будет отображать:
Обновление состояния
Теперь мы создадим кнопку, при нажатии на которую она будет обновлять состояние.
В этом примере мы вставляем код для обновления состояния прямо внутри setCount (count + 1). Мы также могли бы вызвать функцию, которая имеет больше логики, а затем обновить состояние в этой функции.
Это будет иметь такое же поведение.
Вывод
useState можно использовать для самых разных целей: для захвата пользовательского ввода из формы, переключения логического значения для мобильной боковой панели или даже для получения массива сообщений блога, которые вы извлекли из базы данных, и сопоставления их для отображения каждого сообщения.
Я рассматриваю гораздо больше примеров в своем видео на YouTube об useState здесь и уделяю особое внимание обработке формы здесь.
Надеюсь, это помогло кому-то и спасибо за чтение!
-Андрей
