防止JS组件内存泄漏的核心是确保副作用与组件生命周期严格对齐：定时器需保存ID并清除，网络请求用AbortController中止，事件监听器须具名解绑，闭包避免隐式持有实例，禁用原型篡改，所有副作用必须配对清理逻辑。
防止 JavaScript 自定义组件生命周期导致的泄露，核心不是“改原型”或“写错钩子”，而是确保副作用与组件存活周期严格对齐——即：所有外部资源的创建，必须有明确、可靠的销毁路径。
清理未清除的定时器和异步任务
定时器（setInterval、setTimeout）和未 await 完的 Promise 是最常见泄漏源。组件卸载后，它们仍可能执行回调并尝试更新已不存在的状态。
- 在挂载阶段启动定时器时，务必保存其 ID（如
this.timerId = setInterval(...)） - 在卸载前（类组件用
componentWillUnmount，函数组件用useEffect清理函数）调用clearInterval(this.timerId)或clearTimeout - 发起网络请求时，使用 AbortController 主动中止：
const controller = new AbortController(); fetch(url, { signal: controller.signal });，卸载时调用controller.abort()
解绑所有事件监听器
无论是 DOM 事件（click、resize）、自定义事件总线（PubSub），还是 WebSocket、EventSource，只要监听器绑定在组件实例上，就必须显式解绑。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 避免匿名函数监听：
element.addEventListener('click', () => {...})—— 因无法引用，无法移除 - 使用具名或变量存引用：
this.handleClick = this.handleClick.bind(this); element.addEventListener('click', this.handleClick) - 卸载时一一移除：
element.removeEventListener('click', this.handleClick) - 框架内优先使用委托或一次性监听（
{ once: true }），减少管理负担
切断闭包中对组件实例的隐式持有
一个看似无害的回调，可能因闭包捕获了 this 或大型数据对象，让整个组件实例无法被垃圾回收。
立即学习“Java免费学习笔记（深入）”；
- 避免在定时器/请求回调中直接访问
this.state或this.props—— 改用函数组件的useState+useRef保存最新值 - 类组件中可加卸载标记：
this.isUnmounted = false，在componentDidMount设为false，componentWillUnmount设为true，回调里先判断再 setState - 不把整个组件实例传给第三方库或工具函数；只传递必要字段或回调
避免在生命周期中篡改运行时行为
不要在 mounted、componentDidMount 等钩子里动态修改类原型（如 MyComponent.prototype.render = ...）或实例方法。这不是标准做法，也不解决泄漏问题，反而破坏可预测性，干扰框架响应机制。
- 逻辑复用应通过 props 分支、自定义 Hook、高阶组件等受控方式实现
- 状态更新必须带守卫：比如
componentDidUpdate中只在依赖变化时才触发新请求 - 任何副作用（数据拉取、订阅、动画）都应有对应清理逻辑，且清理代码必须能执行到
