Хуки React

React Hooks — важная функция, представленная в React 16.8. Она позволяет функциональным компонентам иметь некоторые возможности классовых компонентов, такие как управление состоянием и использование методов жизненного цикла.

С помощью хуков вы можете писать компоненты React более кратко и гибко.

1. Что такое React Hooks?

React Hooks — это механизм расширения для функциональных компонентов, который позволяет использовать возможности React без написания классовых компонентов. Основные хуки включаютuseState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, иuseImperativeHandleи т.д. Эти хуки предоставляют способ доступа к возможностям React, позволяя вам лучше организовывать и повторно использовать ваш код.

2. Основные хуки React

useState

useStateХук позволяет использовать локальное состояние в функциональных компонентах. Он возвращает значение состояния и функцию для обновления этого значения состояния.

Пример

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

useEffect

useEffectХук позволяет выполнять операции с побочными эффектами в функциональных компонентах (такие как извлечение данных, управление подписками, операции с DOM и т.д.). Он выполняется после каждого рендера.

Пример

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Пустой массив в качестве второго параметра означает, что он выполняется только при монтировании и размонтировании компонента

  return <p>Timer: {seconds} seconds</p>;
}

Ниже приведены некоторые основные хуки React и их применение:

useState - Используется для добавления состояния в функциональные компоненты; с его помощью можно отслеживать данные, которые изменяются со временем.

const [state, setState] = useState(initialState);

useEffect- Используется для выполнения побочных эффектов, таких как получение данных, подписки или ручное изменение DOM. Он аналогичен методам жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount в классовых компонентах.

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

useContext- Используется для доступа к данным, передаваемым через контекст React в дереве компонентов, без необходимости передавать props через каждый компонент.

const value = useContext(MyContext);

useReducer- Используется для более сложной логики состояния. Он принимает функцию-редьюсер и начальное состояние, а затем возвращает текущее состояние и функцию dispatch для отправки действий.

const [state, dispatch] = useReducer(reducer, initialState);

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

const memoizedCallback = useCallback(
  () => {
    // 回调函数体
  },
  [dependencies] // 依赖数组
);

useMemo- Используется для мемоизации результатов вычислений, чтобы избежать повторных вычислений при каждом рендере.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef- Используется для создания ссылок на DOM-элементы или значения, которые могут сохранять состояние между рендерами.

const refContainer = useRef(initialValue);

useImperativeHandle- Используется для предоставления методов DOM-элемента при использовании refs.

useImperativeHandle(ref, () => ({
  // 暴露的方法
}));
useLayoutEffect - 与 useEffect 类似，但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。

useLayoutEffect(() => {
  // 副作用操作
}, [dependencies]);

useDebugValue- Используется для отображения метки для пользовательских хуков в React Developer Tools.

useDebugValue(value);

3. Преимущества использования React Hooks

  • Более краткая логика компонента: Не нужно писать классовые компоненты; можно использовать функциональные компоненты и хуки для управления состоянием и жизненным циклом.
  • Улучшенная переиспользуемость кода: Хуки помогают вынести логику в переиспользуемые функции, уменьшая дублирование кода.
  • Лучшая оптимизация производительности: ИспользуйтеuseEffect, useCallback, useMemoи другие хуки для более точного контроля побочных эффектов и затрат производительности.

4. Примечания

  • Используйте хуки только на верхнем уровне: Не вызывайте хуки в циклах, условиях или вложенных функциях. Убедитесь, что хуки вызываются в одном и том же порядке при каждом рендере.
  • Используйте плагин ESLint: React официально предоставляет плагин eslint-plugin-react-hooks, который помогает проверить правильность использования хуков.

5. Пример

Ниже приведён пример, в котором используются несколько React Hooks:

Пример

import React, { useState, useEffect } from 'react';

function Пример() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Обновлять заголовок только при изменении count

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

export default Пример;

В приведённом выше коде мы использовали useState для управления состоянием count, useEffect для обновления заголовка страницы и простую кнопку для увеличения count.

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

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

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

Другие расширения