4. Hooks (useState, useEffect)

React: Движок. Урок 3: Хуки (useState, useEffect)

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

Что такое хуки?

Хуки - это специальные функции, которые позволяют “подцепиться” к состоянию React и жизненному циклу компонента изнутри функционального компонента. Самые распространенные хуки - это useState и useEffect.

useState

useState позволяет добавлять состояние в функциональные компоненты. В классовых компонентах состояние определялось через this.state и изменялось через this.setState. useState предоставляет более лаконичный и удобный способ.

import React, { useState } from 'react';

function Counter() {
  // Объявляем переменную состояния "count" и функцию для ее обновления "setCount"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали кнопку {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

export default Counter;

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

• useState(0) инициализирует состояние count значением 0.
• setCount - это функция, которую мы используем для обновления значения count.
• При каждом нажатии кнопки, функция setCount(count + 1) обновляет состояние, что приводит к перерисовке компонента и отображению нового значения count.

useEffect

useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты - это операции, которые влияют на что-то вне компонента, например, запросы к API, манипуляции с DOM, установка таймеров.

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

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

  // Этот эффект будет выполняться после каждой перерисовки компонента
  useEffect(() => {
    // Обновляем заголовок документа
    document.title = `Вы нажали ${count} раз`;

    // Функция, которая будет выполнена при размонтировании компонента (cleanup)
    return () => {
      console.log("Компонент размонтирован, очищаем эффект");
    };
  }, [count]); // Второй аргумент - массив зависимостей. Эффект будет выполняться только при изменении значений в этом массиве.
    // Если массив пустой ([]), эффект выполнится только один раз при монтировании компонента.

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

export default Example;

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

• useEffect запускается после каждой перерисовки компонента.
• Внутри useEffect мы обновляем заголовок документа (document.title).
• Массив зависимостей [count] указывает, что эффект должен выполняться только тогда, когда значение count изменяется.
• Функция возвращаемая из useEffect, выполняется при размонтировании компонента, что позволяет очистить любые ресурсы, выделенные во время работы эффекта.

Жизненный пример

useState и useEffect используются повсеместно в современных React приложениях.

• Получение данных с API: useEffect часто используется для выполнения API-запросов при монтировании компонента или при изменении определенных пропсов. Результаты запроса сохраняются в состоянии с помощью useState.
• Формы: useState используется для хранения значений полей ввода в формах. При изменении значения поля, set... функция обновляет состояние, что приводит к перерисовке компонента и отображению обновленного значения.
• Анимации: useEffect может использоваться для запуска и остановки анимаций, а useState для хранения текущего состояния анимации.
• React Router: useEffect используется для прослушивания изменений URL и обновления отображаемого контента.

Например, в большинстве сайтов с динамическим контентом (новостные порталы, социальные сети, интернет-магазины) вы найдете использование useEffect для получения данных с сервера и useState для управления отображением этих данных. React Router использует useEffect для отслеживания изменений URL и переключения между страницами.

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

• useState позволяет добавлять состояние в функциональные компоненты.
• useEffect позволяет выполнять побочные эффекты в функциональных компонентах.
• useEffect может выполняться при монтировании, обновлении и размонтировании компонента.
• Важно указывать массив зависимостей в useEffect, чтобы контролировать, когда должен выполняться эффект.
• Возвращаемая из useEffect функция используется для очистки ресурсов.

Интерактивный пример