React хуки

ReactJS Hooks — одна из самых мощных возможностей React, представленная в версии 16.8. Они позволяют разработчикам использовать состояние (state) и другие возможности React без написания классовых компонентов. Hooks упрощают код, делают его более читаемым и предлагают функциональный подход к разработке на React. С помощью хуков состояние и жизненный цикл React можно использовать в функциональных компонентах, делая их гораздо более функциональными, чем раньше.

Что такое Hooks в React

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

Зачем использовать React Hooks?

Упрощение кода: Хуки позволяют писать компоненты проще и чище, используя функции вместо классов.
Состояние и побочные эффекты: Хуки дают возможность использовать состояние (useState) и побочные эффекты (useEffect) внутри функциональных компонентов.
Переиспользуемость: Хуки облегчают обмен логикой между компонентами через создание пользовательских хуков.
Читаемость: Функциональные компоненты с хуками обычно короче и их легче читать, чем классовые компоненты.

Виды React Hooks

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

1. Хуки состояния (State Hooks)

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

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

Синтаксис:

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

state: текущее значение состояния.
setState: функция для обновления состояния.
initialState: начальное значение состояния, которое может быть примитивом, объектом или массивом.

useReducer:
useReducer — более продвинутый хук для управления сложной логикой состояния, часто связанной с несколькими подзначениями или сложными переходами состояния.

Синтаксис:

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

state: текущее значение состояния.
dispatch: функция для отправки действий, которые изменяют состояние.
reducer: функция, определяющая, как состояние изменяется в ответ на действие.
initialState: начальное состояние.

Объясним работу хука состояния на примере:

import React, { useState } from "react";

function App() {
    // объявляем переменную состояния count с начальным значением 0
    const [count, setCount] = useState(0);

    // функция для увеличения count
    const increment = () => setCount(count + 1);

    // функция для уменьшения count
    const decrement = () => setCount(count - 1);

    return (
        
            Count: {count} {/* Отображение текущего count */}
             {/* Увеличить count */}
             {/* Уменьшить count */}
        
    );
}

export default App;

В этом коде:

Используется useState для объявления переменной состояния в функциональном компоненте.
Переменная состояния count и функция обновления setCount позволяют считывать и изменять состояние.

2. Хуки контекста (Context Hooks)

Хук useContext в React — удобный способ получать значения из React Context API в функциональных компонентах. Он даёт доступ к значениям контекста напрямую, без необходимости вручную передавать props через дерево компонентов.

jsx
const contextValue = useContext(MyContext);

Хук useContext принимает объект контекста (например, MyContext) и возвращает текущее значение этого контекста.
Переменная contextValue содержит значение, предоставляемое ближайшим <MyContext.Provider> в дереве компонентов.

Пример использования хука контекста:

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

function App() {
    const [theme, setTheme] = useState("light");

    const toggleTheme = () => {
        setTheme(prevTheme => prevTheme === "light" ? "dark" : "light");
    };

    return (
        
            
                Current Theme: {theme}
                
                
            
        
    );
}

function ThemeDisplay() {
    const theme = useContext(ThemeContext);

    return Theme from Context: {theme};
}

export default App;

В этом коде:

Хук useContext облегчает получение значений из контекста, позволяя делиться данными между компонентами без "прокидывания" пропсов (prop drilling).
Компонент <ThemeContext.Provider> предоставляет значение контекста всем дочерним элементам.

3. Хуки эффектов (Effect Hooks)

Хуки эффектов, в частности useEffect, useLayoutEffect и useInsertionEffect, помогают функциональным компонентам эффективно и модульно управлять побочными эффектами.

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

Синтаксис:

useEffect(() => {
    // Логика побочного эффекта
}, [dependencies]);

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

useLayoutEffect:
useLayoutEffect похож на useEffect, но срабатывает синхронно после всех изменений DOM и до того, как браузер выполнит отрисовку. Это полезно для измерения или манипуляций с DOM, предотвращая мерцания и обеспечивая плавные переходы.

Синтаксис:

useLayoutEffect(() => {
  // Логика измерения или изменения DOM
}, [dependencies]);

useInsertionEffect:
useInsertionEffect предназначен для быстрого внедрения стилей, особенно полезен при серверном рендеринге (SSR) или с библиотеками стилизации, чтобы гарантировать наличие стилей до визуального отображения компонента.

Синтаксис:

useInsertionEffect(() => {
    // Логика внедрения стилей или изменения таблиц стилей
}, [dependencies]);

Пример использования хука эффекта:

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

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

    useEffect(() => {
        document.title = `Count: ${count}`; // Меняем заголовок страницы
        console.log(`Effect ran. Count is: ${count}`);

        return () => {
            console.log("Cleanup for previous effect");
            document.title = "React App"; // Очистка: сброс заголовка
        };
    }, [count]);

    return (
        
            Count: {count}
            
        
    );
}

export default App;

В этом коде:

useEffect отлично подходит для работы с побочными эффектами, такими как запросы данных, подписки или манипуляции с DOM.
Возвращаемая функция служит для очистки ресурсов (например, таймеров или слушателей событий) при размонтировании компонента или перед следующей активацией эффекта.

4. Хуки производительности (Performance Hooks)

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

useMemo:
useMemo кэширует результат дорогостоящего вычисления и пересчитывает его только при изменении зависимостей. Особенно полезен при тяжёлых вычислениях, которые не должны выполняться на каждом рендере.

Синтаксис:

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

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

Синтаксис:

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

Пример работы с хуками производительности:

import React, { useState, useMemo } from "react";

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    const expensiveCalculation = useMemo(() => {
        console.log("Expensive calculation...");
        return count * 2;
    }, [count]);

    return (
        
            Count: {count}
            Expensive Calculation: {expensiveCalculation}
            
             setText(e.target.value)}
                placeholder="Type something"
            />
        
    );
}

export default App;

В этом коде:

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

5. Хуки для работы с ресурсами (Resource Hooks, например useFetch)

useFetch — обычно это пользовательский (custom) хук, который используется для загрузки данных с API. Он реализован с помощью useEffect для запроса данных при монтировании компонента или изменении зависимостей.

Синтаксис:

const { data, loading, error } = useFetch(url);

useFetch — кастомный хук для загрузки данных с указанного URL.
Использует useEffect для запроса данных при изменении URL и обновляет состояние data.

Пример использования:

import React, { useState, useRef } from "react";

function App() {
    const countRef = useRef(0); // Отслеживает изменяемое значение count
    const [forceRender, setForceRender] = useState(false); // Триггер ререндеринга

    const increment = () => {
        countRef.current += 1; // Увеличиваем текущее значение
        setForceRender(!forceRender); // Запускаем ререндер, чтобы обновить UI
    };

    return (
        
            Count: {countRef.current} {/* Отображение значения count */}
            
        
    );
}

export default App;

В этом коде:

countRef хранит изменяемое значение счётчика.
forceRender управляет повторным рендером для обновления UI.
При нажатии на кнопку значение countRef увеличивается, а UI обновляется.
Новое значение отображается в теге <h1>.

6. Другие хуки

React предоставляет дополнительные хуки для специализированных случаев:

useReducer: для сложного управления состоянием.
useImperativeHandle: настраивает значение экземпляра, возвращаемое useRef.
useLayoutEffect: аналог useEffect, вызывается синхронно после обновления DOM.

7. Пользовательские хуки (Custom Hooks)

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

Пример создания custom hook useWidth для отслеживания ширины окна браузера:

// useWidth.js

import { useState, useEffect } from "react";

function useWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener("resize", handleResize);

        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return width;
}

export default useWidth;

Пример использования этого кастомного хука в компоненте:

import React from "react";
import useWidth from "./useWidth";

function App() {
    const width = useWidth();

    return Window Width: {width}px;
}

export default App;

В этом примере:

Кастомный хук useWidth инкапсулирует логику слежения за шириной окна.
Это уменьшает дублирование кода и повышает его переиспользуемость.

Полный список React Hooks можно найти в руководстве ReactJS Hooks Complete Reference.

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

Простой и чистый код: Функциональные компоненты с хуками короче и понятнее классовых.
Лучше для сложных UI: Хуки упрощают управление состоянием и побочными эффектами в компонентах с запутанной логикой.
Повышенная поддерживаемость: Код с хуками легче тестировать и отлаживать.

Зачем нужны ReactJS Hooks?

Упрощение управления состоянием: Хуки позволяют проще работать с состоянием без классовых компонентов.
Отказ от ключевого слова this: Исключается сложность управления this, делая код чище.
Переиспользуемость логики: Хуки упрощают обмен логикой между компонентами без изменения иерархий.
Улучшенная структура кода: Код становится модульным и удобным для поддержки.
Сокращение шаблонного кода: Функциональные компоненты с хуками компактнее классовых.
Лучший опыт разработчика: Горячая перезагрузка (hot reloading) работает стабильнее, ускоряя разработку.

Правила использования Hooks

Хуки можно использовать только в функциональных компонентах.
Хуки должны импортироваться из React.
Вызов хуков должен всегда происходить на верхнем уровне компонента, вне циклов, условий или вложенных функций.
Хуки нельзя помещать внутрь условных операторов.

Отличия React Hooks и классовых компонентов

Функция	Классовые компоненты	React Hooks
Управление состоянием	`this.state` и методы жизненного цикла	`useState` и `useEffect`
Структура кода	Распределена по методам, может быть сложной	Небольшие, сфокусированные функции
Переиспользуемость	Логика сложно переиспользуется	Легко создавать и использовать кастомные хуки
Кривая обучения	Знакома разработчикам с ООП	Требует иного мышления, чем классы
Обработчики ошибок	Поддерживаются	Сейчас не поддерживаются
Сторонние библиотеки	Некоторые ориентированы на классы	Не все библиотеки совместимы ещё

Важные моменты при работе с хуками

Хуки опциональны начиная с React 16.8 — проект можно внедрять частично или полностью без переписывания существующего кода.
Они обратно совместимы — плавно интегрируются с уже существующими компонентами, без ломающих изменений.
React не планирует удалять классы — хуки и классы смогут сосуществовать.
Проекты могут использовать смешанный подход с классовыми и функциональными компонентами с хуками.
Хуки предоставляют прямой API для ключевых концепций React: props, state, context, refs и жизненный цикл.

🔑 Ключевые моменты:

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

Что такое Hooks в React

Зачем использовать React Hooks?

Виды React Hooks

1. Хуки состояния (State Hooks)

Count: {count}

2. Хуки контекста (Context Hooks)

Current Theme: {theme}

Theme from Context: {theme}

3. Хуки эффектов (Effect Hooks)

Count: {count}

4. Хуки производительности (Performance Hooks)

Count: {count}

Expensive Calculation: {expensiveCalculation}

5. Хуки для работы с ресурсами (Resource Hooks, например useFetch)

Count: {countRef.current}

6. Другие хуки

7. Пользовательские хуки (Custom Hooks)

Window Width: {width}px

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

Зачем нужны ReactJS Hooks?

Правила использования Hooks

Отличия React Hooks и классовых компонентов

Важные моменты при работе с хуками

Похожие записи

React Router

Жизненный цикл React

События React

ОтветитьОтменить ответ