组件卸载后Props对象仍存于内存？如何防范此类内存泄漏？

出现这种情况的核心原因是myObj被某个未及时清理的引用（闭包、事件监听、定时器、全局存储等）持有，导致JavaScript垃圾回收器（GC）无法回收该对象，且每次组件挂载都新建对象会持续增加内存开销。以下是具体的排查和解决方法：

1. 清理未销毁的定时器/间隔任务 #

如果父/子组件中存在引用myObj的定时器、setInterval等任务，组件卸载时未清理会持续持有对象引用：

// 错误示例：定时器持有myObj引用未清理
function Parent() {
  const myObj = { data: "demo data" };

  useEffect(() => {
    const timer = setInterval(() => console.log(myObj.data), 1000);
    // 无清理函数
  }, [myObj]);

  return <Child obj={myObj} />;
}

修复方案：在useEffect的清理函数中销毁任务：

function Parent() {
  // 用useMemo缓存对象，避免每次挂载重复创建
  const myObj = useMemo(() => ({ data: "demo data" }), []);

  useEffect(() => {
    const timer = setInterval(() => console.log(myObj.data), 1000);
    // 卸载时清理定时器
    return () => clearInterval(timer);
  }, [myObj]);

  return <Child obj={myObj} />;
}

2. 移除全局/模块级缓存的引用 #

如果myObj被存储到全局变量、单例对象或模块级缓存中，组件卸载时未删除这些引用会导致对象无法回收：

// 错误示例：全局缓存持有myObj未清理
const globalCache = {};

function Parent() {
  const myObj = { data: "demo data" };

  useEffect(() => {
    globalCache.current = myObj;
    // 无清理逻辑
  }, [myObj]);

  return <Child obj={myObj} />;
}

修复方案：组件卸载时删除全局缓存中的对应引用：

useEffect(() => {
  globalCache.current = myObj;
  return () => delete globalCache.current;
}, [myObj]);

3. 清理子组件中的事件监听/订阅 #

若子组件使用myObj绑定了DOM事件、自定义订阅，未在卸载时移除监听会持有对象引用：

// 子组件错误示例：监听事件持有myObj引用未清理
function Child({ obj }) {
  useEffect(() => {
    window.addEventListener("resize", () => console.log(obj.data));
    // 无清理函数
  }, [obj]);

  return <div>{obj.data}</div>;
}

修复方案：在子组件的useEffect清理函数中移除监听：

function Child({ obj }) {
  useEffect(() => {
    const handleResize = () => console.log(obj.data);
    window.addEventListener("resize", handleResize);
    // 卸载时移除监听
    return () => window.removeEventListener("resize", handleResize);
  }, [obj]);

  return <div>{obj.data}</div>;
}

4. 避免不必要的对象重复创建 #

每次组件挂载都新建myObj会额外增加内存分配，也可能导致依赖项频繁触发。使用useMemo缓存对象，仅在依赖项变化时重新创建：

function Parent() {
  // 仅当依赖项数组中的值变化时，才重新生成myObj
  const myObj = useMemo(() => ({
    data: "demo data",
    config: { enabled: true }
  }), []); // 根据实际业务设置依赖项

  return <Child obj={myObj} />;
}

5. 清理第三方库的引用 #

如果myObj被传入第三方库（如图表、状态管理库），部分库会缓存对象引用，需调用库提供的销毁/清理方法：

function Parent() {
  const myObj = useMemo(() => ({ chartData: [1,2,3] }), []);
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.updateData(myObj.chartData);
    }
    // 调用第三方库的销毁方法释放引用
    return () => chartRef.current?.destroy();
  }, [myObj]);

  return <ThirdPartyChart ref={chartRef} />;
}

6. 使用弱引用存储对象 #

如果需要缓存myObj，优先使用WeakMap/WeakSet而非普通Map/Set，因为弱引用不会阻止GC回收对象：

// 用WeakMap存储，无需手动清理引用
const weakCache = new WeakMap();

function Parent() {
  const myObj = useMemo(() => ({ data: "demo data" }), []);

  useEffect(() => {
    weakCache.set(myObj, "cached value");
    // 无需手动删除，GC会自动回收无其他引用的对象
  }, [myObj]);

  return <Child obj={myObj} />;
}

排查技巧 #

使用Chrome DevTools的内存快照功能，选中未被回收的myObj，查看Retainers面板，追踪对象的引用链，定位到具体持有引用的代码（如定时器、全局变量、事件监听），针对性清理。

内容的提问来源于stack exchange，提问作者John Glabb