如何在 React 中正确地使用 useEffect 处理组件卸载时的清理逻辑以避免内存泄漏？

如何在 React 中正确地使用 useEffect 处理组件卸载时的清理逻辑以避免内存泄漏？

在 React 中，useEffect Hook 可以返回一个清理函数，该函数会在组件卸载前或下一次 effect 执行前被调用。这是处理订阅、定时器、事件监听器等需要显式清理资源的推荐方式。

示例：

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // 返回清理函数
    return () => {
      clearInterval(timerId);
    };
  }, []); // 空依赖数组表示只在挂载和卸载时执行

  return <div>Count: {count}</div>;
}

解析：

• 如果不清理定时器，在组件卸载后 setInterval 仍会尝试更新状态，导致“Can't perform a React state update on an unmounted component”警告，甚至潜在的内存泄漏。
• 清理函数会在以下时机执行：
  1. 组件从 DOM 中移除（卸载）时；
  2. 若 effect 有依赖项，且依赖变化触发下一次 effect 执行前（先清理旧的，再执行新的）。
• 对于事件监听器、WebSocket 连接、第三方库实例等同样需要在清理函数中释放资源。

最佳实践：凡是在 useEffect 中创建了外部资源（非 React 管理的），都应提供对应的清理逻辑。