JavaScript 内存泄漏排查中怎么在 React 效应钩子中清理副作用-js教程-PHP中文网

useEffect清理函数必须在依赖项变化或组件卸载时执行，用于清除定时器、事件监听、异步请求等副作用，防止内存泄漏；其访问的变量来自定义时闭包，需确保资源准确清除且引用稳定。

javascript 内存泄漏排查中怎么在 react 效应钩子中清理副作用

在 React 中，useEffect 的清理函数是防止内存泄漏的第一道防线。关键不是“写了清理函数”，而是它是否真正清除了当前 effect 创建的资源，且捕获的变量是否准确。

哪些副作用必须清理

以下操作若不清理，极易引发内存泄漏或运行时错误：

定时器（setInterval、setTimeout）——组件卸载后仍在执行，持续触发 setState 或请求
全局事件监听（window.addEventListener、document.addEventListener）——监听器残留，导致重复绑定、内存占用上升
异步请求（fetch、axios）——响应返回时组件已卸载，调用 setState 报错 “Can’t perform a React state update on an unmounted component”
WebSocket 或自定义订阅（如 EventEmitter.on）——连接未关闭，持续接收并尝试更新已销毁的组件

清理函数的真实执行时机

清理函数不是“等组件消失才跑”，它有两个明确触发点：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

依赖项变化时：React 先执行上一次 effect 返回的清理函数，再执行新的 effect
组件卸载时：执行最后一次 effect 返回的清理函数

这意味着：清理函数里访问的变量，来自它被定义时所在的闭包，而不是“最新状态”。比如在空依赖数组中启动定时器，清理函数里的 id 是初始那次的；但如果依赖项变化频繁，每次清理的都是前一次的 id，不会误删新定时器。

常见清理写法与避坑要点

正确写法要同时满足：资源可清除 + 变量不被捕获错 + 不依赖过期状态。

定时器：直接保存 ID，return 清除即可
✅ const id = setInterval(...); return () => clearInterval(id);
❌ 不要写成 return () => clearInterval(thisId)（thisId 未声明）或依赖 state 中存的 id（可能滞后）
事件监听：监听函数必须是稳定引用（避免每次渲染新建）
✅ const handleResize = useCallback(() => {...}, []); useEffect(() => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [handleResize]);
异步请求：用 AbortController 主动中断网络请求
✅ const controller = new AbortController(); fetch(url, { signal: controller.signal }); return () => controller.abort();
竞态请求（如搜索联想）：用布尔标记取消逻辑
✅ let isCancelled = false; fetch(...).then(data => { if (!isCancelled) setResults(data); }); return () => { isCancelled = true; };