Использование Хуков в React

20.02.2019
/
oberset

Хуки в React – это новая возможность, которая появилась в версии 16.8. Они позволяют использовать состояние и другие возможности компонентов React в рамках функционального программирования. До появления хуков, если у вас возникала необходимость использовать состояние или жизненные циклы компонента, вам вместо функционального компонента приходилось определять класс. Начиная с версии 16.8 вы можете полностью отказаться от работы с классами в пользу функционального подхода, сохраняя при этом все возможности React-компонентов.

На React конференции 2018 Софи Альперт и Дэн Абрамов представили хуки и продемонстрировали, как выполнить рефакторинг приложения для их использования:

Хук состояния

Пример изменения состояния компонента с помощью хука useState:
import { useState } from 'react';


function Example() {

    // Объявляем новую переменную

    // состояния "count" и функцию для ее обновления

    const [count, setCount] = useState(0);

return ( <div> <p>Вы кликнули {count} раз</p> <button onClick={() => setCount(count + 1)}> Кликни меня </button> </div> ); }
В этом примере мы использовали хук useState для изменения значения счетчика внутри нашего функционального компонента.

React сохраняет значение переменной count между повторными отрисовками. Это поведение аналогично использованию setState внутри класса. Вызов useState возвращает текущее значение состояния и функцию для его обновления. В качестве аргумента useState принимает начальное состояние (в примере выше мы задали начальное значение счетчика равным 0).

Вы также можете определить сразу несколько переменных состояния:
function ComponentWithManyStates() { // Объявляем несколько переменных состояния const [name, setName] = useState('Петя'); const [age, setAge] = useState(25); // ... }

Вызов useState возвращает массив из двух элементов: первый элемент — это текущее значение состояния, второй — функция, которая будет обновлять его. С помощью деструктуризации массива удобно задавать различные имена для каждой переменной состояния.

Нужно обратить внимание, что Хуки в React не работают внутри классов, их можно применять только в функциональных компонентах.

Хук эффекта

Хук эффекта useEffect — это аналог методов жизненного цикла компонента componentDidMount, componentDidUpdate и componentWillUnmount в классах React.

Доработаем наш пример из предыдущего раздела:
import { useState, useEffect } from 'react';


function Example() {

    const [count, setCount] = useState(0);
    // Заменяет componentDidMount и componentDidUpdate:

    useEffect(() => {

      console.log(`Вы кликнули ${count} раз`);

    });

return ( <div> <p>Вы кликнули {count} раз</p> <button onClick={() => setCount(count + 1)}> Кликни меня </button> </div> ); }
В этом примере хук useEffect работает также, как если бы мы использовали метод componentDidUpdate в классе React.

Как быть с componentWillUnmount? Очень просто: хук useEffect может возвращать функцию, которая будет вызвана перед демонтированием компонента.
function Example() { useEffect(() => { console.log('Монтирован в DOM'); return () => { console.log('Удаляется из DOM'); } });

return ( <div>Компонент</div> ); }
Как и в случае с useState, можно вызывать несколько хуков эффекта в компоненте.

Другие хуки

Кроме самых часто используемых useState и useEffect, есть и другие полезные хуки, например useContext и useReducer. Полный список доступных хуков в документации по React Hooks.

Правила использования хуков. При работе с хуками нужно соблюдать некоторые простые правила:

1) Не вызывайте хуки внутри циклов, условий или вложенных функций.

2) Вызывайте хуки только внутри функциональных компонентов.

3) Имена функций-хуков начинаются с use.

Также React дает возможность определять свои собственные хуки, в следующей статье я подробно расскажу об этом.