Мои любимые хуки React для повседневной разработки

Как инженер-программист, я обнаружил, что React Hooks — это революционный инструмент для добавления состояния и других функций React к функциональным компонентам. В этом посте я поделюсь семью хуками React, с которыми, как мне кажется, должен быть знаком каждый разработчик. Эти хуки сэкономили мне бесчисленные часы написания кода и сделали мои приложения React более эффективными и удобными в сопровождении. Итак, давайте погрузимся и узнаем об этих мощных крючках!

использование состояния

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

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

const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);

использованиеЭффект

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

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

использованиеконтекста

Хук useContext позволяет функциональным компонентам получать доступ к контексту React, что является способом передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне. Хук useContext принимает объект Context в качестве аргумента и возвращает текущее значение контекста для этого контекста.

const theme = useContext(ThemeContext);

useRef

Хук useRef позволяет функциональным компонентам получать доступ к базовому элементу DOM, что полезно для управления фокусом, выделением текста или воспроизведением мультимедиа. Хук useRef принимает начальное значение в качестве аргумента и возвращает изменяемый объект ref, который можно использовать для хранения значения, сохраняющегося при рендеринге.

const inputRef = useRef();

const focusInput = () => {
  inputRef.current.focus();
};

использованиередьюсер

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

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

dispatch({ type: 'increment' });

использоватьОбратный звонок

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

const memoizedCallback = useCallback(() => {
  doSomethingExpensive();
}, [dependencies]);

useMemo

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

const memoizedValue = useMemo(() => {
  return expensiveComputation(param);
}, [param]);

В заключение я обнаружил, что React Hooks — незаменимый инструмент в моем наборе инструментов как инженера-программиста. Семь хуков, обсуждаемых в этом сообщении блога — useState, useEffect, useContext, useRef, useReducer, useCallback и useMemo — значительно повысили эффективность и удобство сопровождения моих приложений React. Я настоятельно рекомендую всем разработчикам ознакомиться с этими хуками и включить их в свои проекты. Удачного кодирования!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.