单页应用中组件卸载时需切断闭包对外部对象的强引用链，如定时器、事件监听器、dom 引用等，而非简单置 null；应在生命周期钩子中精准清理，并结合 devtools 验证内存释放。
在单页应用中，组件卸载时若未主动清理闭包引用，容易导致内存泄漏。关键不是“手动置 null”本身，而是切断闭包对外部对象（尤其是 DOM 节点、定时器、事件监听器、大型数据结构）的强引用链，让垃圾回收器能及时回收。
识别闭包中真正需要清理的引用
闭包常捕获的是组件内部状态或外部依赖，比如：
• 定时器 ID（setTimeout/setInterval）
• 事件监听函数（绑定在全局或第三方元素上）
• Promise 的 resolve/reject 回调（尤其未完成的异步操作）
• 对 DOM 元素的直接引用（如通过 ref 或 querySelector 获取）
• 第三方库实例（如 Map、Chart、WebSocket）
这些对象若被闭包持续持有，即使组件已卸载，它们连带的内存也无法释放。单纯给变量赋 null 没用，除非它确实是唯一持有者。
在卸载生命周期中执行精准清理
以主流框架为例：
-
React：在
useEffect清理函数中清除定时器、移除事件监听、取消请求（如调用AbortController.abort()），避免在闭包中继续访问已销毁组件的状态；对 ref 引用的 DOM 或实例，显式设为null（如myRef.current = null） -
Vue：在
onBeforeUnmount中调用clearTimeout、removeEventListener、关闭 WebSocket、销毁第三方实例（如chart.dispose()）；若用ref持有可回收对象，也应设为null - 纯 JS / 自研框架：确保卸载钩子中遍历并断开所有已知引用路径，特别注意嵌套闭包（例如事件回调里又定义了函数）
避免闭包意外延长生命周期
写法比清理更重要：
- 不要在事件处理函数或定时器回调中直接访问组件 state 或 props —— 改用
useState的函数式更新或提取稳定依赖 - 避免将整个组件实例或大对象传入闭包；必要时只传所需字段，或用
useMemo缓存衍生值 - 使用弱引用场景有限，但可考虑
WeakMap存储与 DOM 关联的元数据，避免阻止 DOM 被回收
验证是否真正释放
靠代码逻辑还不够，需结合工具确认：
- Chrome DevTools → Memory → “Take heap snapshot”，筛选
Detached HTMLNode或重复出现的构造函数名，看是否有预期已卸载的组件残留 - 多次触发组件挂载/卸载后观察内存曲线是否平稳，而非持续攀升
- 检查控制台是否仍有“Can't perform a React state update on an unmounted component”等警告（说明异步回调仍在尝试操作已销毁实例）
真正平滑释放不靠一句 someRef = null，而在于从设计源头减少强引用、在卸载时切断所有可观测连接、并通过工具闭环验证。
