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

Метод 1: базовое использование

Наиболее распространенный вариант использования useEffect— однократное выполнение кода при монтировании компонента. Это эквивалентно методу жизненного цикла componentDidMountв компонентах класса.

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Code to run on component mount
    // ...
    return () => {
      // Cleanup code (optional)
      // ...
    };
  }, []); // Empty dependency array indicates it should run only once
  // ...
}

Метод 2: влияние запуска на изменение зависимостей

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

import React, { useState, useEffect } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // Code to run when count changes
    // ...
    return () => {
      // Cleanup code (optional)
      // ...
    };
  }, [count]); // Run effect only when count changes
  // ...
}

Метод 3. Эффекты очистки

Хук useEffectтакже позволяет очистить любые ресурсы или подписки перед отмонтированием компонента. Это похоже на метод жизненного цикла componentWillUnmountв компонентах класса.

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Code to run on component mount
    // ...
    return () => {
      // Cleanup code to run on component unmount
      // ...
    };
  }, []);
  // ...
}

Метод 4: несколько эффектов

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

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Code for effect 1
    // ...
    return () => {
      // Cleanup code for effect 1
      // ...
    };
  }, []);
  useEffect(() => {
    // Code for effect 2
    // ...
    return () => {
      // Cleanup code for effect 2
      // ...
    };
  }, []);
  // ...
}

Метод 5. Асинхронные эффекты

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

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Asynchronous code
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        // Process the data
        // ...
      } catch (error) {
        // Handle errors
        // ...
      }
    };
    fetchData();
    return () => {
      // Cleanup code (if needed)
      // ...
    };
  }, []);
  // ...
}

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