Что такое крючок?
Хук — это специальная функция, которая позволяет вам «подключаться» к функциям React без написания класса.
Например: «useState» — это хук, который позволяет вам добавлять состояние React к компонентам функций.
___________________
Когда бы вы использовали крючок?
Если вы пишете функциональный компонент и понимаете, что вам нужно добавить к нему некоторое состояние, ранее вам приходилось преобразовывать его в класс. Теперь вы можете использовать хук внутри существующего функционального компонента.
___________________
Функциональные компоненты в React
Функциональные компоненты в React выглядят так:
или вот так:
Примечание. Существуют специальные правила о том, где вы можете и не можете использовать хуки в компоненте. Вы можете прочитать это в: Правила использования хуков в React
___________________
Хук useState()
Синтаксис:
Хук ‘useState’ возвращает значение с сохранением состояния и функцию для его обновления.
Во время начального рендеринга возвращаемое состояние (состояние) совпадает со значением, переданным в качестве первого аргумента (initialState).
Функция setState используется для обновления состояния. Он принимает новое значение «состояния» и ставит в очередь повторный рендеринг компонента:
Во время последующих повторных визуализаций первое значение, возвращаемое useState, всегда будет самым последним состоянием после применения обновлений.
___________________
Объявление переменной состояния
Во-первых, мы начинаем с импорта хука useState из React:
Затем мы вызываем хук useState внутри нашего функционального компонента:
Мы объявляем переменную состояния с именем count и передаем 0 в useState() в качестве начального состояния/значения. React запомнит свое текущее значение между повторными рендерингами и предоставит нашей функции самое последнее значение. Если мы хотим обновить текущий счетчик, мы можем вызвать «setCount».
___________________
Использование нескольких переменных состояния
Объявление переменных состояния как пары:
[что-то, установить что-то]
также удобен, потому что позволяет нам давать разные имена разным переменным состояния, если мы хотим использовать более одной:
В приведенном выше компоненте у нас есть «возраст», «фрукты» и «задачи» в качестве локальных переменных, и мы можем обновлять их по отдельности:
Вам не нужно использовать много переменных состояния. Переменные состояния могут прекрасно хранить объекты и массивы, поэтому вы по-прежнему можете группировать связанные данные вместе. Однако, в отличие от this.setState в компоненте класса, при обновлении переменной состояния она всегда заменяется, а не объединяется.
___________________
Что означают квадратные скобки?
Вы могли заметить квадратные скобки, когда мы объявляем переменную состояния:
Имена слева не являются частью React API. Вы можете назвать свои собственные переменные состояния:
Этот синтаксис JavaScript называется «деструктурирование массива». Это означает, что мы создаем две новые переменные «fruit» и «setFruit», где «fruit» устанавливается в первое значение, возвращаемое «useState», а «setFruit» — второе. Это эквивалентно этому коду:
Когда мы объявляем переменную состояния с помощью «useState», она возвращает пару — «массив с двумя элементами». Первый элемент — это текущее значение, а второй — функция, позволяющая нам его обновить. Использование [0] и [1] для доступа к ним немного сбивает с толку, потому что они имеют особое значение. Вот почему вместо этого мы используем «деструктурирование массива».
___________________
Состояние чтения
Когда мы хотим отобразить текущий «количество» в компоненте класса, мы читаем «this.state.count»:
В функциональном компоненте мы можем напрямую использовать count:
___________________
Обновление состояния
В компоненте класса нам нужно вызвать this.setState(), чтобы обновить состояние count:
В функциональном компоненте у нас уже есть setCount и count в качестве переменных, поэтому нам не нужно ключевое слово this:
___________________
Резюме
Давайте повторим то, что мы узнали, построчно и проверим наше понимание:
- Строка 1: мы импортируем хук useState из React. Это позволяет нам сохранять локальное состояние в функциональном компоненте.
- Строка 4: Внутри компонента «Пример» мы объявляем новую переменную состояния, вызывая хук «useState». Он возвращает пару значений, которым мы даем имена. Мы называем нашу переменную count, потому что она содержит количество нажатий кнопки. Мы инициализируем его нулем, передавая 0 в качестве единственного аргумента «useState». Второй возвращаемый элемент сам по себе является функцией. Это позволяет нам обновить «счетчик», поэтому мы назовем его «setCount».
- Строка 9: когда пользователь нажимает, мы вызываем setCount с новым значением. Затем React повторно отобразит компонент «Пример», передав ему новое значение «счетчик».
___________________
Использованная литература:
