Это руководство является частью серии React Hook. Если вы хотите узнать о useState, вы можете найти его здесь. Теперь давайте погрузимся в useEffect.

Введение

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

До введения хуков эти побочные эффекты были возможны только с компонентами класса и их методами жизненного цикла. С помощью useEffect вы можете добавлять побочные эффекты к своим функциональным компонентам, упрощая управление состоянием и поведением ваших компонентов.

Пример

Ниже приведен базовый пример useEffect в компоненте React:

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

Очистка эффектов

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

Например, допустим, у вас есть компонент, который устанавливает тайм-аут для отображения сообщения через 5 секунд:

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

function Example() {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setShowMessage(true);
    }, 5000);

    return () => clearTimeout(timeoutId);
  }, []);

  return (
    <div>
      {showMessage ? <p>Hello World!</p> : null}
    </div>
  );
}

В этом примере хук useEffect устанавливает тайм-аут для отображения сообщения через 5 секунд. Функция очистки clearTimeout возвращается из эффекта для отмены тайм-аута при размонтировании компонента.

Заключение

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