React之useEffect - 技术栈

在React中，useEffect 是一个非常重要的Hook，它用于管理副作用操作。副作用指的是那些不直接与组件渲染相关的操作，例如数据获取、订阅、手动DOM操作等。本文将详细介绍 useEffect 的概念、基础使用、参数说明以及如何清除副作用，并提供多个实用的使用案例。

1. 概念

useEffect 允许在函数组件中执行副作用操作。它在每次组件渲染后都会执行指定的副作用操作，并且可以选择性地在组件卸载时清除副作用。

2. 基础使用

基本的 useEffect 使用方式是在函数组件内部调用它，并传递一个回调函数作为第一个参数，这个回调函数包含我们希望在每次渲染之后执行的副作用操作。

jsx 复制代码

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

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

  // 每次组件渲染后更新文档标题
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

export default ExampleComponent;

在上面的示例中，useEffect 中的回调函数会在每次组件渲染后更新文档标题，因为它没有指定依赖数组（第二个参数），所以每次 count 变化时都会执行。

3. 参数说明

useEffect 可以接收两个参数：

第一个参数：副作用操作的函数。该函数会在每次组件渲染后执行。
第二个参数（可选）：依赖数组，用于控制副作用的触发时机。只有当依赖数组中的值发生变化时，才会重新执行副作用操作。

jsx 复制代码

useEffect(() => {
  // 副作用操作
}, [dependency1, dependency2]);

如果依赖数组为空 []，则副作用操作只在组件挂载和卸载时执行。

4. 清除副作用

在某些场景下，我们需要在组件卸载时清除副作用操作，以避免内存泄漏或无效的操作。为了实现这一点，useEffect 可以返回一个清除函数。

jsx 复制代码

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清除副作用操作
  };
}, [dependency]);

清除函数会在组件卸载时执行，或者在依赖项变化导致副作用重新运行之前执行。

5. 使用案例

数据获取

jsx 复制代码

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetcher;

在这个例子中，useEffect 用于获取远程数据。通过空的依赖数组 []，确保数据只在组件挂载时获取一次。

订阅和取消订阅

jsx 复制代码

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

function EventSubscriber() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('https://api.example.com/events');
    
    eventSource.onmessage = (event) => {
      setEvents(prevEvents => [...prevEvents, JSON.parse(event.data)]);
    };

    return () => {
      eventSource.close();
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <ul>
        {events.map((event, index) => (
          <li key={index}>{event.message}</li>
        ))}
      </ul>
    </div>
  );
}

export default EventSubscriber;

在这个例子中，useEffect 用于订阅事件源，每当收到新事件时更新组件状态。在组件卸载时，清除事件源的订阅以防止内存泄漏。

手动操作DOM或其他全局副作用

jsx 复制代码

import React, { useEffect } from 'react';

function DOMManipulator() {
  useEffect(() => {
    // 操作DOM或执行其他全局副作用操作
    const header = document.querySelector('h1');
    if (header) {
      header.style.color = 'red';
    }

    // 清除副作用
    return () => {
      if (header) {
        header.style.color = 'black';
      }
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default DOMManipulator;

在这个例子中，useEffect 用于在组件挂载时修改页面中的标题颜色为红色，并在组件卸载时恢复为默认颜色。这展示了如何在React中执行一些需要直接操作DOM或者其他全局环境的副作用操作。

##总结

useEffect 是React函数组件中用于处理副作用操作的重要Hook。它的灵活性和清晰的依赖管理使得我们能够在组件中执行各种副作用操作，包括数据获取、订阅、手动DOM操作等。通过理解其基本用法、参数说明和清除副作用的方法，能够更好地应用于实际场景中，提高代码的可维护性和可读性。

希望本文能够帮助你更好地理解和使用 useEffect，从而编写出更健壮和高效的React应用。