组件卸载时异步操作需主动中断而非等待结束，react用useeffect清理函数配合abortcontroller或usepromise，vue3用onbeforeunmount及时释放资源，遵循“谁创建谁中断”原则。

组件卸载时异步操作还在执行，是前端最常见的一类隐患。核心不是“等它结束”，而是让异步任务感知生命周期、主动退出或被中断。

React 中：用 useEffect 清理函数 + AbortController / usePromise

所有副作用必须配对清理，不能只靠状态标记判断。

• 网络请求：优先用 AbortController，把 signal 传给 fetch；在 useEffect 清理函数中调用 controller.abort()
• 定时器或延迟逻辑：setTimeout 或 setInterval 的 ID 存在 useRef 中，清理函数里调用 clearTimeout 或 clearInterval
• Promise 回调风险：用 react-use 的 usePromise 包装原始 Promise，它会自动跳过已卸载组件的 setState
• 避免手动标记 isMounted：虽然可用 useRef(true) + useEffect(() => { return () => { isMounted.current = false } }, [])，但属于兜底手段，不如从源头取消更可靠

Vue 3 中：onBeforeUnmount 是清理主战场

不要拖到 onUnmounted 才动手——资源该释放时就要释放，onBeforeUnmount 是推荐时机。

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

• 事件监听：用 window.addEventListener 等全局监听时，必须在 onBeforeUnmount 中对应调用 removeEventListener
• RxJS 或自定义订阅：保存 Subscription 实例，在钩子中调用 .unsubscribe()
• 第三方库实例：如 Chart.js 调 chart.destroy()，Mapbox 调 map.remove()，WebSocket 调 ws.close() 并置空引用
• 响应式监听：用 watch 或 watchEffect 返回的停止函数，在 onBeforeUnmount 中执行，避免监听持续触发

通用原则：谁创建，谁中断

异步控制流的安全销毁不依赖 GC，而靠显式切断。

• 定时器：每次新建前先清除旧的，ID 统一存在 ref 中，避免闭包捕获过期值
• 连接类资源（WebSocket、EventSource）：检查 readyState，调用 close() 后将实例设为 null
• 闭包引用：回调函数中避免直接读写大型响应式对象或组件状态；必要时用轻量标识符替代完整数据引用
• 视觉轮询：优先用 requestAnimationFrame 替代 setInterval，页面不可见时自动暂停，无需手动清理

别踩的坑：销毁不是“最后一步”

销毁钩子不是保险箱，而是最后一道防线。很多资源早该释放了。

• 防抖搜索中，后发请求应主动取消前一个 fetch，而不是等组件卸载才处理
• 用户切换路由前，长连接、图表、地图等重资源应提前解绑，否则内存滞留明显
• 多个异步并行时，用独立的 AbortController 或清理句柄，避免互相干扰
• 不要在 useEffect 或 onBeforeUnmount 里再发起新异步操作——它本身已是清理阶段

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南