React 19 useEffect内存泄漏的典型场景
内存泄漏往往发生在组件卸载时未正确清理副作用。比如在useEffect中设置了定时器但未清除，或者订阅了事件却忘记取消订阅。React 19的Fiber架构会尝试复用组件实例，如果副作用没清理干净，这些残留引用会一直占用内存。
常见的高危操作包括：
setInterval/setTimeout源码级排查方法论
打开React源码的packages/react-reconciler/src/ReactFiberCommitWork.js，重点看commitMutationEffectsOnFiber函数。这个函数在组件卸载时会执行destroy阶段的逻辑，但前提是开发者正确实现了清理函数。
排查内存泄漏的黄金组合：
performance.memoryAPI实现自动化监控| 工具 | 检测维度 | 精度 |
|---|---|---|
| Chrome Heap Snapshot | 对象引用链 | 高 |
| React Profiler | 组件生命周期 | 中 |
性能优化实战技巧
新版useEffectEvent提案能有效解决依赖项数组导致的过度重渲染问题。这个API允许你在不声明依赖的情况下访问最新状态，相当于自动化的useRef+useEffect组合。
优化案例：处理实时数据流时，传统写法会导致频繁重建WebSocket连接：
// 反模式
useEffect(() => {
const ws = new WebSocket(url);
return () => ws.close();
}, [url]); // url变化导致连接反复重建
改用useEffectEvent后：
const onMessage = useEffectEvent((data) => {
setData(prev => [...prev, data]);
});
useEffect(() => {
const ws = new WebSocket(url);
ws.onmessage = onMessage;
return () => ws.close();
}, []); // 单次初始化
高频问题解决方案
当遇到”Can’t perform state update on unmounted component”警告时，说明存在异步操作未取消。正确的做法是使用AbortController：
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(res => res.json())
.then(data => !controller.signal.aborted && setData(data));
return () => controller.abort();
}, []);
对于复杂的类组件迁移场景，可以结合useLayoutEffect处理DOM操作。注意它的执行时机比useEffect更早，在浏览器绘制前同步执行，适合需要测量DOM的场景。
内存泄漏这事儿在React应用里其实挺常见的，特别是当你发现页面越用越卡，或者浏览器标签页的内存占用从500MB一路飙升到2-3GB的时候。除了常见的”Can’t perform state update”警告，还可以留意下滚动是否开始卡顿、动画是否变得不流畅，这些都是内存吃紧的明显信号。Chrome开发者工具里的Performance和Memory面板是排查利器， 在操作前后各做一次堆快照对比，重点关注Detached但未被回收的DOM节点，还有那些本应被销毁却依然存在的组件实例引用。
实际操作中，我习惯先用Performance Monitor实时监控JS堆大小和DOM节点数，如果这两个指标在页面操作后只增不减，八成是有内存泄漏了。这时候再切到Memory面板，用Allocation instrumentation on timeline记录内存分配时间线，特别要留意那些频繁创建却未被释放的对象。比如你在一个列表组件里反复滚动加载，正常情况下旧数据应该被回收，但如果看到10-20次滚动后相同类型的对象实例数直线上升，那肯定是有地方没清理干净。
如何判断我的React应用是否存在内存泄漏？
最直接的迹象是页面操作后内存持续增长不释放，或频繁出现”Can’t perform state update on unmounted component”警告。 用Chrome Memory面板记录堆分配时间线，如果看到Detached DOM树或闭包引用持续增加，基本可以确认存在泄漏。
useEffect的清理函数应该在什么时机执行？
清理函数会在两种情况下执行：1）组件卸载时必定执行；2）依赖项变化导致effect重新执行前，会先执行上次的清理函数。注意在React 18+的并发模式下，组件可能经历”卸载-挂载”的快速循环。
为什么StrictMode下useEffect会执行两次？
这是React故意设计的开发环境行为，用于暴露不规范的副作用代码。如果组件能在双重调用下保持稳定（比如清理函数正确实现了幂等性），说明代码质量达标。生产环境不会出现这种情况。
5-10个组件共用的WebSocket连接该如何管理？
推荐使用context配合自定义hook：在顶层组件创建WebSocket实例并通过context下发，子组件通过useWebSocket hook注册消息处理器。注意在hook内部用useRef保存连接实例，并在顶层组件的useEffect返回清理函数。
使用第三方图表库时如何避免内存泄漏？
关键是要在组件卸载时手动调用库的dispose()方法（如果有），并清理所有DOM节点。对于D3.js这类直接操作DOM的库， 把图表容器ref的掌控权完全交给React，避免产生游离DOM节点。
