Что такое хук? хук — это специальная функция или встроенная функция, которая позволяет вам «подключаться» к функциям React. Например, useState — это хук, который позволяет добавлять состояние React к функциональным компонентам.
Когда нам следует использовать хук? Если у вас есть функциональный компонент и вы понимаете, что вам нужно добавить к нему некоторое состояние. Раньше вам приходилось преобразовывать этот функциональный компонент в компонент класса. С выпуском React 16.8 в феврале 2019 года нам больше не нужно преобразовывать функцию в компонент класса, теперь вы можете использовать хук внутри существующего функционального компонента, чтобы получить некоторое состояние.
В этом руководстве вы изучите useState, сравнив этот функциональный компонент с эквивалентным компонентом класса.
Эквивалентный компонент класса
Прежде всего, нам нужно импортировать хук «useState» из реакции, который будет вызываться внутри нашей функции, чтобы получить некоторое состояние.
Объявление переменной состояния
В нашем компоненте класса мы инициализируем состояние счетчика равным 0, установив для this.state значение {count : 0 } в конструкторе:
В нашем функциональном компоненте, поскольку у нас нет this, мы вызываем хук useState непосредственно внутри нашей функции, чтобы объявить нашу переменную состояния:
Что делает useState? useState обладает точно такими же возможностями, которые this.state предоставляет в классе. Он объявляет «переменную состояния», в этом примере наша переменная называется count, а setCount — это функция, которая будет использоваться для обновления нашего состояния. Переменная.
Что нужно передать в useState в качестве аргумента? Единственным аргументом для передачи в хук useState является начальное состояние, и оно может быть числом или строкой, в отличие от классов, где состояние должно быть объектом.
Что возвращает useState? Он возвращает пару значений: текущее состояние и функцию, которая его обновляет. В нашем примере мы объявляем переменную состояния с именем count и устанавливаем для нее значение 0. SetCount — это функция, которую мы будем использовать для обновления текущего счетчика.
Состояние чтения
Когда мы хотим отобразить текущее количество в классе, мы читаем this.state.count:
В функции мы можем использовать count напрямую:
Обновление состояния
В классе нам нужно вызвать this.setState(), чтобы обновить состояние счетчика:
В функции у нас уже есть функция setCount(), которую мы будем вызывать для изменения состояния счетчика:
Мы также можем создать другую функцию, единственной целью которой является обновление состояния. На этот раз давайте вызовем эту функцию «handleChange», а внутри этой функции мы вызовем функцию setCount для изменения состояния:
Надеюсь, вам понравилось читать этот урок.
Ресурсы:
https://reactjs.org/docs/hooks-state.html
https://www.smashingmagazine.com/2020/04/react-hooks-api-guide/