如何在 React 中正确地使用 useEffect 处理组件卸载时的清理操作？

如何在 React 中正确地使用 useEffect 处理组件卸载时的清理操作？

回答与解析：

在 React 中，useEffect Hook 可用于在组件挂载、更新或卸载时执行副作用。当组件卸载时，如果存在异步操作（如数据请求、定时器、事件监听等），需要进行清理以避免内存泄漏或对已卸载组件的状态进行更新。

正确的做法是在 useEffect 的回调函数中返回一个清理函数（cleanup function）。React 会在组件卸载前自动调用该函数。

示例：

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    let isMounted = true; // 防止组件卸载后更新状态

    fetch('/api/data')
      .then(res => res.json())
      .then(result => {
        if (isMounted) {
          setData(result);
        }
      });

    // 清理函数
    return () => {
      isMounted = false; // 表示组件已卸载
    };
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

关键点解析：

1. 返回清理函数：useEffect 返回的函数会在组件卸载（或下一次 effect 执行前）被调用。
2. 避免状态更新警告：若在异步回调中更新已卸载组件的状态，React 会抛出警告。使用 isMounted 标志可规避此问题。
3. 适用场景：定时器（setTimeout/setInterval）、订阅、WebSocket 连接、全局事件监听等都需要在清理函数中清除。

注意：React 18 的严格模式下，开发环境会故意多次挂载/卸载组件以帮助发现潜在问题，因此正确实现清理逻辑尤为重要。