React — это ориентированная на дизайн библиотека, используемая для создания интерактивных веб-приложений, где элементы DOM перезагружаются только при внесении изменений. Это называется дифференциальной перезагрузкой. Это полезно, когда вам нужны интерактивные и динамические элементы DOM.
Ранее React был простой библиотекой внешнего интерфейса, которая использовалась только для того, чтобы все выглядело красиво. Требовался модуль с состоянием, такой как Flux или Redux, чтобы поддерживать состояние, чтобы сделать его полностью функциональным. Но появление React-Hooks полностью изменило ситуацию.
Хуки — это функции или компоненты, которые позволяют компонентам React в полной мере использовать функциональные возможности состояний без использования внешних библиотек или модулей. Они предоставляют данные или компонент состояния модели, который будет использоваться компонентами представления React.
Они дают React контроль над его данными и возвращают ко всей функциональности его компонентов.
Изменения пользовательского интерфейса → Побочные эффекты → Изменения состояния → Изменения пользовательского интерфейса
Изменения пользовательского интерфейса или взаимодействия с пользователем приводят к побочным эффектам, которые изменяют состояние компонентов, что, в свою очередь, приводит к изменениям пользовательского интерфейса. Реагирующие хуки позволяют изменять состояния и в некоторой степени отслеживать изменения и эффекты в побочных эффектах из-за взаимодействия пользователя с компонентом пользовательского интерфейса.
Использовать состояние:
Хук useState() определяет состояние компонента, которое будет использоваться позже. Функция возвращает массив — первый элемент — это переменная состояния, а второй — установщик состояния.
В приведенном выше примере состояние — это переменная состояния, доступная только для чтения, функция setState устанавливает состояние с предоставленным значением. Значение, отправленное в useState (в данном случае 0), становится начальным значением состояния. В противном случае он не определен.
Эффект использования:
Хук useEffect() похож на onComponentDidMount() модуля Redux. Он вызывается при монтировании компонента. Всякий раз, когда состояние компонента изменяется, компонент монтируется по-разному, т. е. часть DOM, в которой есть изменения, будет перезагружена и повторно смонтирована. Затем вызываются задачи внутри useEffect(). useEffect принимает 2 аргумента: вызываемую функцию и массив значений, для которых должна быть вызвана функция. Массив значений - это те, которые просматриваются. Когда компонент монтируется, он смотрит, не изменились ли значения в массиве, если да, то функция выполняется. Если массив не передается или передается пустой массив, функция вызывается для всех изменений состояния. Это может быть немного опасно, особенно если задачи внутри функции сами изменяют состояние! useEffect() в основном используется, когда вы хотите установить начальные значения для компонента. Например, когда вы хотите получить набор значений из API и присвоить их состоянию компонента или пользовательскому интерфейсу. Начальные значения могут быть информацией о пользователе, списком пользователей, списком пользовательских данных и т. д.
В приведенном выше примере задачи в useEffect вызываются только при изменении значения props.value.
Используйте Редуктор:
Этот хук используется, когда вам нужен редьюсер для изменения состояния, которое вы используете, хотя я на самом деле не нуждался в этом хуке, я обнаружил, что это еще один из наиболее часто используемых хуков. Он создает редуктор для состояния компонента.
Однако в следующей истории я расскажу о многих наиболее часто используемых хуках, а также о том, как, где и когда создавать свои собственные пользовательские хуки!
