Знакомство с React hooks

В версии реакта 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… .

Во второй части — практикум.