必须清理未取消的异步请求、未解绑的全局事件监听器、未释放的定时器、未注销的第三方库订阅、闭包中滞留的大型数据及useEffect依赖不完整问题，否则引发内存泄漏和状态更新警告。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
一、清理未取消的异步请求
组件卸载后继续执行的fetch或axios请求会尝试更新已销毁组件的状态，触发“Can't perform a React state update on an unmounted component”警告，并导致内存持续占用。必须在组件卸载时中止请求，防止悬挂的Promise持有对组件实例的引用。
1、使用AbortController创建可中断的请求信号
2、在useEffect清理函数中调用abort()方法
3、在请求then/catch分支前检查signal.aborted状态，避免无效setState
二、移除未解绑的全局事件监听器
通过window或document添加的事件监听器若未显式移除，将长期保留在内存中并持续引用组件作用域内的函数和变量，形成闭包滞留。关键在于确保addEventListener与removeEventListener使用**完全相同的函数引用**。
1、将事件处理函数声明为组件作用域内的具名常量
2、在useEffect依赖数组为空数组时绑定监听器
3、在返回的清理函数中传入相同函数引用调用removeEventListener
三、清除未释放的定时器资源
setInterval或setTimeout在组件卸载后仍运行，不仅浪费CPU周期，还会因回调中访问已销毁组件的state或props而引发错误。定时器ID必须被保存并在组件生命周期结束时明确清除。
1、在useEffect内声明并启动定时器，同时保存其返回值
2、将定时器ID赋值给const变量，避免被误覆盖
3、在清理函数中调用clearInterval或clearTimeout，并传入该ID
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
四、注销第三方库的订阅与实例
D3.js、Chart.js、RxJS等库在初始化时往往在DOM节点或全局对象上附加私有数据或监听器。若不调用其提供的destroy()、unsubscribe()或dispose()方法，这些强引用将阻止整个组件树被垃圾回收。
1、查阅所用第三方库文档，确认其是否提供显式销毁接口
2、在useEffect清理函数或componentWillUnmount中调用该销毁方法
3、确保销毁操作在组件卸载前完成，且不依赖于可能已失效的ref或实例属性
五、避免闭包中滞留大型数据对象
在分页加载、搜索建议等场景中，若在闭包内长期持有bigData数组、缓存Map或未序列化的响应体，即使组件已卸载，这些数据仍因被异步回调引用而无法释放。应主动切断对非必要数据的持久引用。
1、将大数据结构定义在useEffect作用域内而非外层闭包
2、在清理函数中将相关引用设为null或清空数组长度
3、对需跨请求共享的数据，改用useRef存储并手动管理其生命周期
六、验证useEffect依赖数组完整性
当useEffect依赖项缺失或未正确更新时，可能导致清理函数引用过期的值（如旧的timer ID、旧的event handler），使实际清理失效。依赖数组必须精确反映所有参与副作用逻辑的变量。
1、使用ESLint插件eslint-plugin-react-hooks检查exhaustive-deps规则
2、对每次渲染都生成新函数的事件处理器，改用useCallback包裹并指定稳定依赖
3、在清理函数中使用当前闭包中捕获的最新值，而非试图从外部读取可能已变更的状态
