Что такое хук? хук — это специальная функция или встроенная функция, которая позволяет вам «подключаться» к функциям 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/