Обзор хуков¶

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

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

Состояние позволяет компоненту "запоминать" информацию, например, вводимую пользователем. Например, компонент формы может использовать состояние для хранения значения ввода, а компонент галереи изображений - для хранения индекса выбранного изображения.

Чтобы добавить состояние в компонент, используйте один из этих хуков:

• useState объявляет переменную состояния, которую вы можете обновлять напрямую.
• useReducer объявляет переменную состояния с логикой обновления внутри функции reducer.

1
2
3
4

function ImageGallery() {
    const [index, setIndex] = useState(0);
    // ...
}

Контекстные хуки¶

Контекст позволяет компоненту получать информацию от удаленных родителей, не передавая ее в виде пропсов. Например, компонент верхнего уровня вашего приложения может передавать текущую тему пользовательского интерфейса всем компонентам ниже, независимо от глубины.

• useContext читает и подписывается на контекст.

1
2
3
4

function Button() {
    const theme = useContext(ThemeContext);
    // ...
}

Реф хуки¶

Рефы позволяют компоненту хранить некоторую информацию, которая не используется для рендеринга, например, узел DOM или идентификатор таймаута. В отличие от состояния, обновление рефа не приводит к повторному рендерингу компонента. Рефы - это "аварийный люк" из парадигмы React. Они полезны, когда вам нужно работать с системами, не относящимися к React, например, со встроенными API браузера.

• useRef объявляет реф. Вы можете хранить в нем любое значение, но чаще всего он используется для хранения узла DOM.
• useImperativeHandle позволяет вам настроить реф, открываемый вашим компонентом. Это редко используется.

1
2
3
4

function Form() {
    const inputRef = useRef(null);
    // ...
}

Хуки эффектов¶

Эффекты позволяют компоненту подключаться к внешним системам и синхронизироваться с ними Это включает работу с сетью, DOM браузера, анимацией, виджетами, написанными с использованием другой библиотеки UI, и другим не-React кодом.

• useEffect подключает компонент к внешней системе.

1
2
3
4
5
6
7
8

function ChatRoom({ roomId }) {
    useEffect(() => {
        const connection = createConnection(roomId);
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]);
    // ...
}

Эффекты - это "аварийный люк" из парадигмы React. Не используйте эффекты для оркестровки потока данных в вашем приложении. Если вы не взаимодействуете с внешней системой, возможно, вам не нужен эффект.

Есть две редко используемые вариации useEffect с различиями во времени:

• useLayoutEffect срабатывает до того, как браузер перерисовывает экран. Вы можете измерить компоновку здесь.
• useInsertionEffect срабатывает до того, как React внесет изменения в DOM. Здесь библиотеки могут вставлять динамические CSS.

Хуки производительности¶

Общий способ оптимизации производительности повторного рендеринга - пропустить ненужную работу. Например, вы можете указать React повторно использовать кэшированные вычисления или пропустить повторный рендеринг, если данные не изменились с момента предыдущего рендеринга.

Чтобы пропустить вычисления и ненужный повторный рендеринг, используйте один из этих хуков:

• useMemo позволяет кэшировать результат дорогостоящего вычисления.
• useCallback позволяет кэшировать определение функции перед передачей ее оптимизированному компоненту.

1
2
3
4
5
6
7

function TodoList({ todos, tab, theme }) {
    const visibleTodos = useMemo(
        () => filterTodos(todos, tab),
        [todos, tab]
    );
    // ...
}

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

Чтобы установить приоритет рендеринга, используйте один из этих хуков:

• useTransition позволяет пометить переход состояния как неблокирующий и разрешить другим обновлениям прерывать его.
• useDeferredValue позволяет отложить обновление некритичной части пользовательского интерфейса и позволить другим частям обновляться первыми.

Хуки ресурсов¶

Компонент может получить доступ к ресурсам, не имея их в качестве части своего состояния. Например, компонент может прочитать сообщение из Promise или прочитать информацию о стиле из контекста.

Чтобы прочитать значение из ресурса, используйте этот хук:

• use позволяет прочитать значение ресурса, например Promise или context.

1
2
3
4
5

function MessageComponent({ messagePromise }) {
    const message = use(messagePromise);
    const theme = use(ThemeContext);
    // ...
}

Другие хуки¶

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

• useDebugValue позволяет вам настроить метку, которую React DevTools отображает для вашего пользовательского хука.
• useId позволяет компоненту связать с собой уникальный ID. Обычно используется в API доступности.
• useSyncExternalStore позволяет компоненту подписаться на внешний магазин.

Ваши собственные хуки¶

Вы также можете определить собственные пользовательские хуки как функции JavaScript.

Источник — https://react.dev/reference/react/hooks

Комментарии