组件销毁后需显式取消全局数据订阅以防内存泄漏：React用useEffect清理函数，Vue用onBeforeUnmount，JS类暴露destroy方法；禁用匿名回调，改用具名引用；状态库中勿存组件实例，可用WeakMap缓存；最后用Chrome Heap Snapshot验证是否彻底释放。
组件销毁后，全局数据订阅残留是典型的内存泄漏源头——不是因为没“释放”，而是因为没人告诉 JavaScript “这个订阅已经失效了”。关键不在“清不清”，而在“知不知”。
明确取消订阅的触发时机
不能依赖组件卸载后的自动清理，必须在销毁逻辑中显式调用取消方法：
- React 中使用 useEffect 返回清理函数，确保每次依赖变化或组件卸载时执行取消
- Vue 中在 onBeforeUnmount 或 beforeDestroy（Options API）里调用
unsubscribe() - 纯 JS 类组件需暴露 destroy() 方法，并在外部调用（如路由离开、DOM 移除前）
避免匿名回调导致无法取消
很多订阅 API（如 RxJS 的 subscribe()、EventBus 的 on()、WebSocket 的 addEventListener）若传入匿名函数，就无法后续移除：
- ❌ 错误写法：
eventBus.on('data', () => this.handleData())—— 没有引用，无法off - ✅ 正确写法：
this.handler = (data) => this.handleData(data); eventBus.on('data', this.handler)，销毁时调用eventBus.off('data', this.handler) - 第三方库如 rxjs 推荐用
Subscription.add()统一管理，最后subscription.unsubscribe()
检查全局状态容器是否持有组件引用
像 Redux、Pinia、Zustand 等状态库本身不泄漏，但若你在 store 中存了组件实例、闭包函数或 DOM 节点，就会拖住整棵引用链：
立即学习“Java免费学习笔记（深入）”；
- 不要把
this、ref、setState回调直接塞进 store；改用唯一 ID 或纯数据 - 使用 WeakMap 缓存组件相关状态（如
weakMap.set(instance, state)），实例销毁后自动解绑 - Pinia 中避免在
actions里长期持有组件上下文；优先用事件总线或响应式参数传递
验证是否真被清理干净
别靠猜，用 Chrome DevTools 实测：
- 打开 Memory 面板 → Take Heap Snapshot，先强制 GC（点击垃圾箱图标）
- 操作组件挂载 → 销毁 → 再次强制 GC → 拍第二张快照
- 对比两次快照，筛选构造函数名（如
Subscription、Listener、你的组件类名），看 Retained Size 是否归零 - 点开残留对象，查看 Retainers 列表——如果还连着
window、globalThis或某个未销毁的 store 实例，就是订阅没断干净
