Введение в крючки React

Крючки 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, а затем выясняем, как вычислить следующее состояние.