React 组件卸载后怎么防止内存泄漏？

Question

仓乃文 · Accepted Answer

组件卸载后如果异步回调仍然执行 setState，React 会报警告且可能内存泄漏。核心解法是在 useEffect 清理函数中标记组件已卸载或取消异步操作。

标记卸载状态：
```javascript
function Profile({ userId }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    let cancelled = false;
    fetchUser(userId).then((user) => {
      if (!cancelled) setData(user);  // 卸载后不更新
    });
    return () => { cancelled = true; };  // 标记已卸载
  }, [userId]);
}
```

常见泄漏场景及解法：
```javascript
useEffect(() => {
  // 1. 定时器
  const id = setInterval(() => { /* ... */ }, 1000);
  return () => clearInterval(id);

// 2. 事件监听
  const handler = () => { /* ... */ };
  window.addEventListener("resize", handler);
  return () => window.removeEventListener("resize", handler);

// 3. WebSocket
  const ws = new WebSocket(url);
  return () => ws.close();

// 4. 订阅
  const unsub = store.subscribe(() => { /* ... */ });
  return () => unsub();
}, []);
```

补充说明：
- React 18+ 不再对卸载后的 setState 报警告，但内存泄漏仍然存在
- 核心原则：useEffect 中注册的任何副作用，都必须在清理函数中撤销
- AbortController 可以取消 fetch 请求，比标记法更彻底
- 闭包引用了组件内部变量也会阻止垃圾回收，清理函数中置空 ref 可帮助 GC