Перехватчики React - это интересная функция, добавленная в последнюю версию react (16.8).
Чтобы понять, что такое хуки, читателям необходимо знать, как компоненты на основе классов работают в React и основы ES6.
Как мы все знаем, функциональные компоненты в React не могут содержать состояния (данные сами по себе). Только компоненты на основе классов имеют свое состояние и функции, которые управляют состоянием.
Хуки - это функция, которая позволяет состоянию быть частью бесклассового компонента .Voila! Ударяет в колокол, не так ли?
Традиционный способ объявления состояния и управления им - как в приведенном ниже примере в компоненте класса.
Теперь с помощью хуков React можно выразить изменение внутреннего состояния потока - реакцию пользовательского интерфейса без использования класса ES6.
Чтобы использовать хуки, мы должны импортировать в наш компонент пакет useState, предоставляемый посредством реакции.
Импортируя вышеуказанный пакет, мы как бы сообщаем компоненту, что собираемся использовать некоторый фрагмент состояния внутри логики. Теперь давайте сконцентрируемся на том, как использовать useState для установки начального состояния и его изменения.
Мы объявляем массив, содержащий 2 переменные, короче переменную состояния и модификатор.
Аргумент, который присутствует внутри функции useState, есть не что иное, как начальное состояние. Таким образом, можно подумать, что счетчик переменной состояния содержит состояние «0», а setCount изменит состояние в компоненте на основе бизнес-логики.
Обратите внимание, что incrementCounter - это не компонент класса, а чисто функциональный компонент, который обрабатывает состояние.
Теперь возникает следующий естественный вопрос: можем ли мы использовать хуки для извлечения данных? Почему нет ?! У нас есть пакет useEffect, предоставляемый React, который помогает нам в этом.
Традиционно с компонентами на основе классов мы делаем это с помощью метода lifeCycle, componentDidMount, следующим образом:
При использовании useEffect выборка данных происходит в функциональном компоненте следующим образом:
Мы вызываем асинхронный вызов (выборку) внутри функции useEffect и изменяем данные состояния с помощью произвольной функции с именем setData.
Пока вы выполняете указанную выше функцию, вы обнаружите, что приложение работает в бесконечном цикле. Где ошиблись?
«useEffect служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount»
componentDidUpdate! componentDidUpdate - это метод жизненного цикла, запускаемый каждый раз, когда компонент получает новые реквизиты или происходит изменение состояния. И отсюда бесконечный цикл!
Чтобы устранить эту ошибку, useEffect ожидает второй аргумент, пустой массив!
Таким образом, с помощью хуков мы научились управлять состоянием внутри самого функционального компонента.
Это избавляет нас от ограничения, согласно которому только компоненты на основе классов могут иметь собственное состояние.
Поскольку мы понимаем, что такое крючки, давайте рассмотрим возможности их использования в наших любимых проектах.
Удачного обучения :)
