Реагировать на крючки
Хуки были представлены в феврале 2019 года и позволяют программисту повторно использовать логику с отслеживанием состояния без необходимости изменять иерархию компонента. Они стали очень популярным методом, поскольку делают ваш код более кратким и пригодным для повторного использования. До хуков программист должен был использовать компоненты класса и функции жизненного цикла для управления состоянием и побочными эффектами. Это больше не так, однако по-прежнему рекомендуется иметь знания о компонентах на основе классов. В этой статье мы рассмотрим пару наиболее распространенных хуков, таких как useState и useEffect, и дадим краткое описание некоторых из менее распространенных хуков. Первое, что вам нужно сделать при работе с хуками, — это импортировать их вверху вашего файла из react.
import { useState } { useEffect } { useContext } { useRef } { useMemo } { useCallback } from 'react'
useState
Этот хук позволяет вам добавлять состояние к функциональному компоненту. Он возвращает значение состояния и функцию для обновления этого значения.
const [exampleState, setExampleState] = useState('Example');
Первое значение «exampleState» — это текущее состояние внутри компонента, и оно должно быть инициализировано ожидаемым типом возврата, например, строкой, массивом, числом, логическим значением или объектом. В нашем примере мы инициализировали состояние строковым значением.
Второе значение «setExampleState» — это функция, используемая для установки состояния внутри компонента. Состояние в компоненте обычно обновляется, когда пользователь делает что-то в приложении, чтобы активировать функцию useState.
Использование оператора спреда для обновления состояния
Оператор распространения может использоваться для обновления определенного свойства внутри объекта.
const [character, setCharacter] = useState(
{name: "John Snow",
age: 32,
weapon: "sword"});
setCharacter(previousState => {
return { ...previousState, weapon: "spear" }
});
использовать эффект
Этот хук используется для выполнения побочных эффектов, таких как получение данных из API, непосредственное обновление DOM и таймеров. Он запускается после рендеринга компонента и может выполнять монтирование компонента, а также обновления. Хук принимает два аргумента: функцию и зависимость.
useEffect( ( Place parameter here ) => { Place Logic here }, [Place Dependency Here] );
Если зависимость оставлена пустой, хук будет отображаться только один раз, когда компонент будет смонтирован. В противном случае вы можете использовать зависимость в пустых скобках массива, чтобы хук отображался каждый раз, когда зависимость изменяется. Как правило, состояние размещается как зависимость, поэтому при изменении состояния эффект срабатывает снова.
Другие, реже используемые хуки с определениями:
- useContext. Можно использовать useState для более легкого совместного использования состояния между глубоко вложенными компонентами, чем только с useState. Используется, когда у вас много разных компонентов и вам нужен доступ. Часто не используется, так как мы можем сделать то же самое, передав реквизит.
- useRef: предоставляет способ ссылки на изменяемое значение, которое сохраняется при визуализации компонента. Его можно использовать для доступа к элементам DOM, сохранения предыдущих значений и многого другого.
- useMemo: позволяет запоминать, что означает, что это помогает оптимизировать дорогостоящие вычисления, кэшируя результат до тех пор, пока не изменятся зависимости.
- useCallback: запоминает функцию, чтобы она создавалась заново только в случае изменения ее зависимостей. Это может быть полезно для оптимизации производительности, особенно в сценариях, где функции передаются в качестве свойств дочерним компонентам.
- useReducer: позволяет использовать пользовательскую логику состояния и используется, когда вы пытаетесь отслеживать несколько частей состояния, основанных на сложной логике.
