Это руководство является частью серии 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 и другими побочными эффектами простым и понятным способом.