单页应用中组件卸载时须精准清理定时器和事件监听器：定时器需保存引用并显式清除，事件监听器须用相同函数引用配对移除，清理逻辑应幂等且不依赖钩子必然执行。
在单页应用（SPA）中，组件卸载时若未清理定时器和事件监听器，容易导致内存泄漏、重复触发、状态错乱等问题。关键不是“全部清除”，而是“精准清理”——只清当前实例创建的资源，且确保清理逻辑在组件真正销毁前执行。
定时器必须保存引用并显式清除
使用 setTimeout 或 setInterval 时，返回值是唯一标识符（数字），必须保存在组件实例上（如 React 的 useRef 或 class 组件的 this.timerId），不能依赖闭包变量或局部变量——因为卸载时局部作用域已不可访问。
常见错误写法：
❌ 错误：局部变量无法在卸载时读取function MyComponent() {
setTimeout(() => console.log('delayed'), 1000); // 没有保存 timerId
return <div>...</div>;
}
正确做法：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- React 函数组件：用
useRef存储 timerId，并在useEffect清理函数中调用clearTimeout/clearInterval - Vue 3：在
onBeforeUnmount中清除，timerId 存于ref或let变量（需确保作用域可访问） - 原生 Web Components：在
disconnectedCallback中清除，timerId 存为实例属性（this._timerId）
事件监听器必须使用相同参数配对移除
添加监听器时用了 addEventListener(el, 'click', handler)，移除时必须传入**完全相同的函数引用**和选项（如 { capture: true }）。匿名函数、箭头函数、内联函数都无法被精确移除。
正确做法：
立即学习“Java免费学习笔记（深入）”；
- 将 handler 声明为具名函数或用
useCallback/ref缓存，确保添加与移除时引用一致 - 优先使用
AbortController（现代推荐）：通过signal自动解绑所有关联监听器 - 全局监听（如
window、document）尤其要清理，否则会持续响应，影响其他组件
清理时机必须可靠，不能依赖“可能触发”的钩子
不要假设 useEffect 的清理函数、beforeDestroy 或 disconnectedCallback 一定执行——路由快速跳转、强制刷新、异常退出都可能导致跳过。因此：
- 清理逻辑本身应具备幂等性（多次执行无副作用），例如
clearTimeout(this.timerId)多次调用安全 - 对关键资源（如 WebSocket、长连接）增加超时自动关闭机制，不完全依赖卸载钩子
- 在组件挂载时就初始化清理标记（如
isMounted = useRef(true)），在异步回调中检查，避免更新已卸载组件的状态
借助工具辅助检测残留资源（可选但实用）
开发阶段可用浏览器 DevTools 快速验证：
- Performance 面板录制后查看 “Timers” 和 “Event Listeners” 是否随组件卸载而减少
- Memory 面板拍快照，对比前后对象数量，重点关注
Timeout、Interval、EventListener实例 - 在清理函数中加
console.log或断点，确认是否执行（注意：生产环境禁用）
