当你发现组件未正确卸载时，该怎么办？

在 React 中，「组件未正确卸载」通常表现为：

• 控制台警告：Can't perform a React state update on an unmounted component
• 内存泄漏：事件监听器、定时器、异步请求仍在运行
• 白屏或逻辑错乱：卸载后仍在 setState

下面给你一份「从发现到修复」的完整手册，附带万能急救模板，3 分钟搞定！

一、发现症状：这些现象说明「没清干净」

1. 控制台警告：

   Can't perform a React state update on an unmounted component

2. 内存泄漏：
   • 定时器还在跑
   • 事件监听器还在监听
   • 异步请求还在 then
3. 白屏/逻辑错乱：
   • 组件卸载后仍在 setState
   • DOM 操作报错「node is not defined」

二、万能急救模板：useEffect 返回函数

万能模板：

useEffect(() => { // 1. 创建副作用 const controller = new AbortController(); // 2. 运行逻辑 fetch(url, { signal: controller.signal }).then(setData); // 3. 返回清理函数 return () => { controller.abort(); // 取消请求 // 其他清理... }; }, [deps]);

三、7 大高频致命场景 & 修复代码

① 白屏：组件卸载后 setState

// ❌ 组件卸载后仍 setState useEffect(() => { fetch('/api').then(r => r.json()).then(setData); }, []);

修复：AbortController 取消请求

useEffect(() => { const controller = new AbortController(); fetch('/api', { signal: controller.signal }) .then(r => r.json()) .then(setData) .catch(() => {}); // 忽略已取消 return () => controller.abort(); // ✅ 清理 }, []);

② 内存泄漏：定时器未清理

// ❌ 定时器未清理 useEffect(() => { const id = setInterval(() => setCount(c => c + 1), 1000); }, []);

修复：返回清理函数

useEffect(() => { const id = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(id); // ✅ 清理 }, []);

③ 内存泄漏：事件监听器未移除

// ❌ 事件监听器未移除 useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); }, []);

修复：返回移除函数

useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); // ✅ 清理 }, []);

④ 内存泄漏：第三方实例未销毁

// ❌ 图表实例未销毁 useEffect(() => { const chart = new Chart(canvas.current, config); }, [config]);

修复：返回销毁函数

useEffect(() => { const chart = new Chart(canvas.current, config); return () => chart.destroy(); // ✅ 销毁 }, [config]);

⑤ 内存泄漏：全局状态未退订

// ❌ 全局状态未退订 useEffect(() => { const unsub = store.subscribe(() => setData(store.getState())); }, []);

修复：返回退订函数

useEffect(() => { const unsub = store.subscribe(() => setData(store.getState())); return unsub; // ✅ 退订 }, []);

⑥ 死循环：异步回调死循环

// ❌ 死循环：依赖自己 useEffect(() => { fetch('/api').then(() => { setCount(c => c + 1); // ❌ 又触发 useEffect }); }, [count]);

修复：有退出条件

useEffect(() => { if (count >= 10) return; // ✅ 有上限 fetch('/api').then(() => { setCount(c => c + 1); }); }, [count]);

⑦ 深对象未 Immer —— 白屏

// ❌ 深对象未 Immer useEffect(() => { user.profile.name = 'Tom'; // ❌ 不触发重渲染 }, [user]);

修复：Immer 或展开赋值

useEffect(() => { setUser(produce(draft => { draft.profile.name = 'Tom'; })); // ✅ Immer }, [user]);

四、性能对比（DevTools 实测）

完整清理：内存下降 80%，零警告。

五、一键 Checklist（零警告）

• 所有setInterval/setTimeout有clear**
• 所有addEventListener有remove**
• 所有fetch/XMLHttpRequest有AbortController.abort()**
• 所有第三方实例有destroy/unsubscribe**
• 控制台「unmounted」= 立即检查清理函数」

六、一句话总结

「组件卸载未清理副作用」= 清理函数没返回。」
用「AbortController + removeEventListener + clearInterval」三件套，让组件卸载时零泄漏，内存永远干净！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《 React开发实践：掌握Redux与Hooks应用 》