React Hooks — краткий обзор
Что такое React-хуки
Хуки React — это новый способ доступа к методам состояния и жизненного цикла.
Что нового в хуках
На самом деле, хуки реакции почти не добавили столько нового, это скорее ярлык для функций, которые уже существовали раньше.
Преимущества крючков
Основным преимуществом хуков является возможность их использования на функциональном компоненте. Еще одним большим преимуществом является разделение проблем при вызовах нескольких хуков, но об этом позже.
Правила крючков
У React Hooks есть строгий набор правил, с которыми можно подробно ознакомиться в разделе Правила хуков. Наиболее важными являются:
- Хуки можно вызывать только внутри компонентов React и пользовательских хуков. Всегда в основной функции, а не в помощниках или дополнительных функциях.
- Хуки никогда не должны вызываться внутри условия или цикла. Это потому, что хуки всегда должны выполняться в одном и том же порядке и одинаковое количество раз.
Существует плагин ESLint для помощи в работе с этими правилами.
Наиболее распространенные крючки
использование состояния
Это, безусловно, самый используемый крючок. Как следует из названия, это хук для работы с переменными состояния. Он возвращает массив, содержащий два значения, первое — это сама переменная состояния, а второе — функция для установки ее значения.
использованиеЭффект
Это очень мощный крючок. useEffect — это прямая замена трех старых методов жизненного цикла: componentDidMount, componentDidUpdate и componentWillUnmount.
Основное использование
В этом примере компонент будет отображать заголовок со значением 0 и обновлять его каждый раз, когда мы нажимаем кнопку.
Запускать только при изменении определенных переменных
Будет работать только при изменении переменной value.
Запускать только на componentDidMount
Передача пустого массива заблокирует запуск хука при повторном рендеринге компонента.
Запускается при размонтировании компонента
Возвращая функцию, эта функция будет вызываться при размонтировании компонента, и хук будет действовать аналогично методу componentWillUnmount жизненного цикла.
Пользовательские крючки
Пользовательские хуки могут быть созданы для использования одной и той же логики в разных компонентах. Это обычные функции, однако их имя ДОЛЖНО начинаться с use. Пользовательские хуки могут использовать другие хуки, а также другие пользовательские хуки. К пользовательским хукам применяются те же правила Правил хуков.
Пользовательский хук
Этот пользовательский хук установит заголовок со значением 0 и обновит его каждый раз, когда вызывается функция увеличения.
Компонент 1
Компонент 2
Крючки для тестирования
Компоненты с крючками
На данный момент хуки React не очень хорошо поддерживаются во всей экосистеме React. В частности, Enzyme еще не полностью поддерживает тестирование функциональных компонентов с помощью хуков. Для этого вам нужно будет использовать библиотеку под названием react-testing-library, как в примере ниже:
Пользовательские крючки
Как было сказано ранее, хуки можно использовать только в реагирующих компонентах и пользовательских хуках, но набор тестов не является ни тем, ни другим. Итак, в этом сценарии нарушаются Правила хуков.
Это НЕ будет работать
Как протестировать пользовательский хук
Для тестирования пользовательских хуков вам понадобится другая библиотека под названием react-hooks-testing-library, как в примере ниже:
Другие крючки
использованиеконтекста
Этот хук позволяет получить доступ к контексту и вернуть его значение по умолчанию или значение поставщика. Пример:
Контекст
Компонент
использованиередьюсер
Как следует из названия, этот хук будет получать действие и, в зависимости от его типа, возвращать новое, измененное состояние.
Пример:
Типы действий
Действия
Редуктор
Компонент
Множественные вызовы ловушек и разделение проблем
При использовании методов жизненного цикла каждый метод может быть вызван только один раз, что приводит к беспорядочным функциям, которые одновременно решают несколько задач. Пример:
С помощью хуков каждая обязанность может быть разделена на один вызов хука. Пример:
