В версии реакта 16.8.0 команда разработчиков планирует выпустить react hooks, поэтому пора бы разобраться что нас ждет.
React hooks предоставляют новые возможности для уменьшение дублирования кода. Давайте рассмотрим работу useState, useEffect, и собственных хуков в реакт.
План изучения:
- Документация Introducing Hooks (часть 1)
- Документация Hooks at a Glance (часть 1)
- Статья Build a CRUD App in React with Hooks (автор Tania Rascia) (часть 2)
- … (другие материалы, так же попадут в часть 2)
Данная статья состоит из конспекта документации (первая часть) и из практической работы (вторая часть).
Введение в хуки (Introducing Hooks)
Пример из документации сразу же понятен всем, кто использовал в работе recompose и withState хук, для остальных — комментарий в коде.
Мотивация разработчиков React:
- Тяжело использовать stateful-логику между компонентами;
- Сложные компоненты становятся тяжелыми для понимания;
- Классы (class) путают и людей, и машины;
Решение: «хуки». Нечто, что позволит добавлять привычный функционал «классов» в stateless-компоненты (компоненты, созданные с помощью function).
Взгляд на хуки (Hooks at a Glance)
По порядку о текущих хуках:
State hook
useState — это хук (а технически — это функция) которая принимает один аргумент — начальное значение, которое будет установлено в момент первой отрисовки.
В нашем случае, получается, что мы передаем 0 (ноль), который будет установлен в count (как будто бы в this.state.count если бы это был компонент созданный с помощью class)
Вместо тысячи объяснений «на пальцах» — пример одного и того же компонента:
Разумеется, вместо 0 вы можете передавать любое начальное значение, в том числе и объект.
Определение нескольких переменных в state
Порядок вызова важен, так как таким образом реакт определяет какая часть state относится к определенному вызову useState.
Подробно про useState хук в документации.
Effect hook
Под эффектом понимается любое действие, которое может задеть «другие компоненты» и не может быть выполнено во время render’a. Это то, что мы привыкли называть «сайд-эффектом».
Чтобы произвести «очистку» (ранее, вы выполняли это в componentWillUnmount) — просто верните (return) функцию из useEffect.
Напоследок еще один пример из документации, в котором указано как можно использовать несколько эффектов.
Подробно про useEffect, включая примеры с class против hooks
Правила использования react-хуков
(перевод абзаца из документации)
Хуки — это javascript функции, однако, они налагают пару дополнительных правил:
- Используйте хуки только на верхнем уровне. Не используйте хуки внутри циклов, условий или вложенных функций.
- Используйте хуки только из stateless-компонентов. Не вызывайте хуки из обычных js-функций (на самом деле, есть еще одно место, откуда вы можете вызвать hook легально — это ваши «кастомные» хуки (custom hooks — хуки, сделанные собственноручно)).
Мы (разработчики react) выкатили плагин для линетра, чтобы автоматизировать процесс.
Подробнее про правила хуков в реакте
Создание собственных хуков
Кратко: предположим, есть пара компонентов, между которыми мы хотим «пошарить» (поделить) логику (собственно, для этого хуки и задумывались). Эту логику, вместо копирования в 2 компонента, мы выносим в свой хук и используем.
Пример: (не торопимся, читаем внимательно)
В итоге, мы избавились от дублирования кода в компонентах FriendStatus и FriendListItem.
Если вас заинтересовал данный подход, можете погрузиться в еще один абзац документации: Как передать информацию между хуками.
Так же вы можете ознакомиться со списком хуков.
При создании собственных хуков, название функций начинайте с use… .
Во второй части — практикум.
