关键不是“全删”，而是“精准断连”——只清自己创建且仍有效的资源；须统一存id、按需批量清理，绑定框架卸载钩子（react用useeffect清理函数，vue3用onbeforeunmount），显式解绑第三方库并切断闭包引用。
组件销毁时清理定时器和订阅，关键不是“全删”，而是“精准断连”——只清自己创建的、且仍有效的资源，避免误伤或遗漏。
统一存 ID，按需批量清理
不要靠全局变量或零散变量管理定时器。用 Set 或数组集中维护当前组件内所有活跃的定时器 ID：
- 每次调用
setTimeout或setInterval后，立即将返回的数字 ID 加入集合（如timerIds.add(id)） - 在卸载前遍历集合，对每个 ID 调用对应清除函数：
clearTimeout(id)或clearInterval(id) - 清除完成后立刻清空集合（
timerIds.clear()），防止重复清理或残留引用
框架生命周期里做清理，不依赖手动调用
把清理逻辑绑定到框架的卸载钩子中，确保时机可靠：
-
React：在
useEffect的清理函数中执行，它会在组件卸载或 effect 重新运行前自动触发 -
Vue 3：使用
onBeforeUnmount；Vue 2 用beforeDestroy - 原生 JS 或微前端场景：监听
pagehide或visibilitychange，配合组件状态判断是否已销毁
第三方库订阅必须显式解绑
库不会因为组件消失就自动释放资源。常见情况要主动处理：
-
WebSocket / EventSource：检查
readyState，调用.close()，再将实例设为null -
图表/地图类（Chart.js、Mapbox）：调用实例的
.destroy()或.remove()方法，然后置空引用 -
网络请求（Axios / fetch）：Axios 用
CancelToken或AbortController；fetch 用abort()，并在清理函数中调用 -
事件监听器：保存 handler 函数引用（不要用匿名函数），用
removeEventListener解绑
切断闭包引用，防止组件被钉住
定时器回调或事件处理函数若直接读写组件状态（如 setState、this.data、大型响应式对象），会隐式持有整个组件实例，阻碍垃圾回收：
- 回调中只做轻量操作，更新状态前先判断组件是否还存活（React 可用
useRef标记 mounted 状态；Vue 3 可用getCurrentInstance()） - 避免在回调中闭包捕获大对象（如原始数据数组、DOM 节点集合），改用 ID、索引等轻量标识
- 清理完成后，将 timer ref、库实例等变量显式设为
null，辅助 GC 识别可回收区域
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
