Хуки представлены в React 16.8. Они позволяют подключаться к функциям React, таким как состояние компонента и метод жизненного цикла, которые будут реализованы в функциональном компоненте.
Раньше, когда нам нужно было реализовать в React функциональные возможности, такие как состояние компонентов или события жизненного цикла, мы должны были реализовать компонент класса, но после хуков все они могли быть реализованы в функциональном компоненте без использования класса.
Хуки - это функции, которые позволяют подключаться к функции реагирования, такой как методы состояния и жизненного цикла, в функциональных компонентах.
В этой статье я обсуждаю следующие хуки
- useState
- useEffect
Я также буду сравнивать компонент класса с функциональным компонентом, используя хуки.
useState Hook
Как следует из названия, этот хук можно использовать для выполнения каких-либо действий с состоянием в функциональном компоненте.
Ранее, когда нам нужно было определить состояние в компоненте, мы могли использовать компонент класса следующим образом
Ниже приведен простой компонент устаревшего класса, в котором две переменные состояния определены и изменяются при событии.
Теперь посмотрим, как мы можем воспроизвести вышеуказанный компонент класса в качестве функционального компонента.
Это репликация компонента класса как функционального компонента, поскольку вы видите, что мы используем хуки useState для достижения функциональности обработки состояния в функциональном компоненте. useState возвращает значение пары, сначала это имя переменной, которая должна использоваться в качестве переменной состояния, а во-вторых, это функция для изменения значения этой переменной.
useEffect Hook:
Эффект используется для обработки побочного эффекта, возникающего для любого компонента, например, при установке или обновлении. В компонентах класса это достигается с помощью методов жизненного цикла, а теперь в функциональных компонентах это достигается с помощью перехвата эффектов.
Ниже приведен пример компонента класса, который обновляет заголовок документа, когда компонент монтируется или обновляется.
Воспроизведение этого как функционального компонента
Обратите внимание, что в компоненте класса мы делаем то же самое в методах жизненного цикла монтирования и обновления, которые оба обрабатываются с помощью useEffect Hook.
Следующее, что приходит на ум, - это метод жизненного цикла componentWillUnmount, поэтому давайте рассмотрим пример, когда вы добавляете прослушиватель событий при монтировании компонента, и вам нужно удалить его при размонтировании компонента, чтобы мы могли добиться этого с помощью хуков. Во-первых, взгляните на унаследованный компонент класса.
В приведенном выше примере мы добавляем прослушиватель событий при монтировании компонента и удаляем его в методе жизненного цикла componentWillUnmount.
Давайте посмотрим, как это реализовано в функциональной составляющей.
Обратите внимание, что при использовании отдельного хука эффекта для ширины можно использовать столько эффектов, сколько вы хотите. Хорошая практика состоит в том, чтобы сохранять тесно связанные вещи в одних и тех же эффектах. Следует отметить еще одну вещь: если useEffect выполняется при каждом обновлении, чем события подписываются постоянно. поэтому, чтобы преодолеть это, мы передаем второй аргумент ловушке эффекта, который в основном представляет собой массив обновлений, это может быть состояние или реквизиты, но если он пуст, это означает, что эффект должен запускаться только во время монтирования, и если функция проходит к хуку эффекта верните функцию, которая означает, что она будет запущена, когда компонент будет размонтирован.
С помощью этих крючков мы также можем изготовить нестандартные крючки. Хуки - это просто функции, которые дают возможность хукам реагировать.
Вы можете обратиться к репозиторию git за кодом.
ССЫЛКА НА GITHUB
Любые рекомендации приветствуются.
Спасибо!
