Крючки React
Одним из многих инструментов, доступных в React, является использование хуков. Раньше для использования состояния и других возможностей React нужно было писать класс. Эти хуки позволяют нам подключаться к частям библиотеки React. Существует десять различных типов хуков, здесь я рассмотрю первые пять.
- useState
- useEffect
- useContext
- useRef
- useReducer
- useMemo
- useCallback
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Наиболее распространенными являются useState и useEffect.
useState
Самым важным и наиболее часто используемым хуком является useState. Его основная цель — обработка реактивных данных; в основном все, что меняется в приложении, использует состояние. Переключение чего-либо с включенного на выключенный режим или ввод текста в поле ввода — вот примеры того, как обычно реализуется useState. Как только любые данные изменяются, react может перерисовать пользовательский интерфейс. useState требует трех вещей:
useState должен быть импортирован в компонент.
import { useState } from “react”;
useState должен быть инициализирован. Мы делаем это, вызывая usesState в нашей функции компонента.
const [food, setFood] = useState(“”); // initializing with an empty string
Ему необходимо текущее состояние и функция-установщик для обновления этого состояния. Эти два последних требования можно записать в одной строке.
import { useState } from “react”;
function FavoriteFood() {
const [food, setFood] = useState(“”);
}
Первое значение, food, — это наше текущее состояние. Второе, setFood, — это функция, которая обновляет наше состояние. А useState инициализируется пустой строкой.
Для обновления состояния всегда используйте функцию setter.
setFood( “Cheeseburger”);
useEffect
Этот хук позволяет вам выполнять побочные эффекты в ваших компонентах. Например, таймеры или получение данных. useEffect принимает два аргумента. Первый аргумент — это функция, которая будет запущена при срабатывании useEffect, а второй — это массив зависимостей, в котором будут храниться элементы, вызывающие функцию, он не обязателен и по умолчанию будет запускаться при каждом цикле рендеринга. Как и все хуки, useEffect также должен быть импортирован.
import { useEffect } from “react’;
useEffect запускается при каждом рендере. И каждый повторный рендер запускает другой эффект. Иногда это желаемый результат. Если нет, есть несколько способов контролировать запуск побочных эффектов.
- Зависимость не передана
- Пустой массив
- Реквизиты или значения состояния
useEffect(() => {
//No dependency passed
//Runs on every render
});
useEffect(() => {
//An empty array
//runs only on the first render
}, []);
useEffect(() => {
//Props or state values
//Runs on the first render
//And any time and dependency value changes
}, [prop, state]);
Некоторые эффекты требуют очистки для уменьшения утечек памяти. Таймауты, подписки, слушатели событий и другие эффекты, которые больше не нужны, должны быть утилизированы. Мы делаем это, включая функцию возврата в конце хука useEffect.
return () => clearTimeout(timer)
}, []);
useContext
Этот хук позволяет работать с Context API React. Это позволяет нам обмениваться данными внутри дерева компонентов без необходимости передавать их компоненту через props. Это способ глобального управления состоянием. useContext можно использовать в сочетании с useState для обмена состоянием между глубоко вложенными компонентами. Это намного проще, чем использовать только useState, потому что состояние должно храниться в самом верхнем родительском компоненте, которому требуется доступ к этому состоянию.
Чтобы использовать этот хук, необходимо импортировать из react и инициализировать его.
import { useState, createContext, useContext } from “react”;
const UserContext = createContext()
Function Componet1() {
Const [user, setUser] = useState(“Thomas Cook”);
Return (
<UserContext.Provider value={user}>
<h1>{‘Hello ${user}!’}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
Function Component2() {
Return (
<>
<h1>Component 2</h1>
<Component3 />
</>
):
}
Function Component3() {
Const user = useContext(UserContext);
Return (
<>
<h1>Component 3</h1>
<h2>{‘Hello ${user} again!’}</h2>
</>
);
}
Функция createContext используется вместе с провайдером контекста, чтобы обернуть дерево компонентов, которым нужен контекст состояния. Затем вы можете получить доступ к контексту состояния во всех компонентах
useRef
Этот хук позволяет сохранять значения между рендерами. Он может создавать изменяемые объекты и очень похож на useState тем, что отслеживает изменение значений. Основное отличие заключается в том, что useRef не вызывает повторного рендеринга при изменении значения. Он возвращает только один элемент, объект под названием current. useRef инициализируется и устанавливается со значением useref(0).
Const count = {current: 0}
//can be accessed using .current
Count.current
useReducer
useReducer очень похож на хук useState. Этот хук также позволяет использовать пользовательскую логику состояния. useReducer может быть полезен в ситуациях, когда вам нужно отслеживать несколько частей состояния, которые полагаются на сложную логику. Он использует паттерн Redux для управления состоянием. Вместо того чтобы обновлять состояние напрямую, мы отправляем действия, которые переходят к функции reducer, а затем выясняем, как вычислить следующее состояние.