Сегодня мир становится более функциональным и, наверное, это еще одно его дополнение. Хуки позволяют использовать функции React в функциональном компоненте. Состояние, жизненный цикл и многое другое можно использовать в функциональном компоненте с помощью хуков.
До сих пор функциональный компонент React называется компонентом без состояния; однако лучше теперь называть их функциональным компонентом.
Хуки позволяют повторно использовать логику с отслеживанием состояния в компоненте.
Хуки - не единственное, что позволяет получить все функции React в функциональном компоненте, но хуки также могут решить множество существующих проблем:
Адская оболочка
В настоящее время с помощью HOC и Render-props можно совместно использовать отслеживание состояния для всего компонента. Но это добавляет больше компонентов в иерархию и заставляет реагировать на дополнительные вычисления. Хуки позволяют совместно использовать (повторно использовать) логику с отслеживанием состояния в компоненте и могут быть протестированы независимо.
Огромный компонент
componentDidMount и componentDidUpdate могут получать данные для компонента. Тот же компонент componentDidUpdate также может быть полезен для несвязанной логики для установки прослушивателей событий. componentWillUnmount будет использоваться для очистки этих прослушивателей. Однако хуки позволяют использовать отдельную связанную логику в небольших функциях.
Запутанные классы
Как мы все знаем, «this» работает в javascript, работает совсем иначе, чем на всех других языках. Разработчики должны связать прослушиватели событий с this, чтобы использовать их в функции рендеринга (если вы не используете предложение свойства нестабильного класса), и код становится очень подробным с помощью this, и такие ситуации приводят к неожиданным ошибкам и их трудно отлаживать.
Итак, до сих пор мы обсуждали что такое хуки и как они могут решать несколько проблем компонентов класса. Давайте подробнее рассмотрим перехватчики реакции:
Использование состояния в функциональном компоненте:
С помощью ловушки useState функциональный компонент теперь может иметь состояние:
В приведенном выше примере useState возвращает массив, текущее значение состояния и функцию , с помощью которой значение состояния можно изменить. Здесь setText работает так же, как setState для компонента класса. Более того, первый параметр useState представляет начальное значение состояния. При последующем рендеринге react просто игнорирует первый аргумент.
React запоминает имя переменной и функции во время повторного рендеринга компонента для создания ловушки.
Использование эффектов (жизненных циклов) в функциональной составляющей:
Хук useEffect позволяет компоненту функции использовать жизненные циклы компонента класса реакции. Независимо от того, какая функция, которую мы предоставляем в useEffect, называется «эффектом», React гарантирует завершение ее выполнения до следующего рендеринга.
Давайте добавим текст, который вы вводите, к заголовку документа с помощью useEffect.
useEffect запускается при каждой визуализации компонента, даже при первой визуализации. Следовательно, useEffect можно использовать как componentDidMount и componentDidUpdate. Кроме того, useEffect может возвращать функцию, которую можно использовать для отмены подписки на слушателей при отключении от монтирования. Следовательно, эта функция работает как componentWillUnmount.
Здесь есть еще одна вещь, о которой стоит поговорить - необязательный второй параметр useEffect, с помощью которого мы можем контролировать выполнение useEffect.
Есть три основных способа изменить поведение useEffect.
- Пустой массив - useEffect будет вызываться только один раз во время первоначального рендеринга.
- Массив с переменными - React будет наблюдать за переменными, которые вы передали в массив, если какая-либо из переменных изменилась, тогда этот конкретный useEffect будет выполнен в следующем рендере. Такое поведение можно рассматривать как shouldComponentUpdate.
- Поскольку это необязательно, если вы ничего не передадите, этот конкретный useEffect будет вызываться при каждом рендеринге.
useEffect можно использовать в компоненте несколько раз, что позволяет нам разделять связанную логику.
Пользовательский крючок
Давайте создадим собственный хук, чтобы понять, как их можно использовать со встроенными хуками.
Я хочу создать для своего приложения очень простой маршрутизатор, например, hook, он предоставит мне компонент, основанный на URL.
Как показано в примере выше, useRouter принимает массив путей с соответствующим компонентом. Его задача должна возвращать правильный компонент на основе данного URL.
Итак, вот наш собственный хук, useRouter. Он принимает конфигурацию и возвращает компонент, соответствующий определенному пути, и функцию , с помощью которой мы можем изменить путь.
В нашем хуке мы использовали несколько useState и useEffect для логического разделения вещей.
При первоначальном рендеринге ловушка регистрирует событие onpopstate для событий браузера (например, кнопки назад или вперед). Если путь изменится, то ловушка вернет текущий компонент и добавит путь в историю.
Примечание. В реальном маршрутизаторе приложений будет много вариантов и комбинаций. Я просто хотел показать на примере, как мы создаем собственные хуки и чего с их помощью можно достичь.
Пользовательский хук можно внедрить в любой функциональный компонент. Реакция создаст отдельные копии для всех хуков, и состояние, используемое в хуке, будет отличаться для разных компонентов.
Правила крючка
При использовании хуков необходимо соблюдать несколько правил:
Хуки могут использоваться на верхнем уровне функционального компонента
Крючки не следует использовать условно. Они должны выполняться в одном порядке во время всех рендеров. Это позволяет React сохранять состояние хуков между несколькими вызовами useState и useEffect.
Хуки можно использовать только в функциональном компоненте
Хук не может использоваться в компоненте класса, и нет смысла его там использовать.
Каждое имя ловушки должно иметь префикс "использование".
У всех встроенных или пользовательских хуков должен быть префикс «использование».
Хуки на 100% обратно совместимы, и React не планирует удалять классы из реакции. Более того, команда React поставляет плагин lint для автоматического применения этих правил.
Больше крючков:
- UseContext - Использовать контекст, используя
- UseReducer - работает как redux и выдает текущее состояние и отправку
- UseCallback - вернет запомненную версию обратного звонка
- UseMemo - вернет мемоизированное значение
- UseRef - Использовать ссылку с помощью этого хука
- UseImperativeHandle - Настроить значение экземпляра
- UseLayoutEffect - срабатывает синхронно после всех мутаций DOM.
- UseDebugValue - может использоваться для отображения метки для пользовательских хуков в React DevTools.
В конце концов, хуки станут очень полезными в будущем, потому что их можно будет независимо тестировать и использовать как для компонентов, так и для сообщества React.
