React组件卸载后WeakMap里的DOM引用没被回收怎么办？

我先说结论：你这个问题不是 WeakMap 没起作用，而是你用错了键 —— 用组件函数本身做键是无效的，它根本不会随组件实例销毁而被回收，因为组件函数是全局常量，一直存在内存里。

WeakMap 的弱引用只针对「键对象」，不是针对「值」。如果你用的是一个对象引用作为键，当这个键对象不再被其他地方引用时，它才会被 GC 回收，从而 WeakMap 里的那条记录也会被自动移除。

但在你的代码里：

domRefs.set(MyComponent, ref.current);

MyComponent 是一个函数定义，它在整个应用生命周期里始终存在，不会被回收。所以即使组件实例卸载了，MyComponent 这个键在 WeakMap 里依然有效，对应的值（DOM 节点）也一直被引用着，自然不会被 GC 回收。

这就是为什么你看到内存没降下来。



正确做法：用组件的实例引用（或 DOM 元素本身）做键

最简单可靠的方式是：直接用 ref.current（也就是 DOM 元素）做 WeakMap 的键，或者用组件实例（如果你用 class component 的话）。但你用的是函数组件 + hooks，没有组件实例对象，所以推荐用 DOM 元素做键。

改法如下：

const domRefs = new WeakMap();



function MyComponent() {

  const ref = useRef(null);

  useEffect(() => {

    const el = document.createElement('div');

    ref.current = el;

    // 用 DOM 元素本身做键 —— 它的生命周期和组件实例绑定

    domRefs.set(el, { someData: 'xxx' });



    return () => {

      // 卸载时清空 ref，同时 WeakMap 会自动丢弃这条记录（因为键 el 已无强引用）

      ref.current = null;

      // 这里其实不用手动 delete，但加上也无妨

      domRefs.delete(el);

    };

  }, []);



  return <div ref={ref}></div>;

}

这里需要注意：你必须确保 DOM 元素 el 在卸载后不再被其他地方引用（比如被其他变量 hold 住），否则 WeakMap 里的键也不会被回收。



再举个常见错误例子

很多人写成这样：

const cache = new WeakMap();



function MyComponent() {

  const data = { id: Math.random() };

  cache.set(data, 'some cached value');

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

}

你以为每次组件重新渲染，data 是新对象，WeakMap 就能自动清理旧的。但其实每次渲染都会创建新 data，旧的 data 没人引用了，所以它会被 GC 回收，WeakMap 里的那条记录也会自动消失 —— 这没问题。但问题是，如果你在 effect 里缓存了某个值，却忘了在 cleanup 里断开其他引用，比如：

let cachedData;



useEffect(() => {

  const data = { id: 123 };

  cachedData = data; // ← 这里搞了个全局变量强引用！

  weakMap.set(data, 'value');

  return () => {

    cachedData = null; // 要记得清理

  };

}, []);

这种情况，即使 data 是 WeakMap 的键，但因为 cachedData 还指着它，所以不会被回收。



什么时候该用 WeakMap？

总结一下 WeakMap 的正确使用场景：

- 你想给某个「对象实例」附加私有数据，但又不想污染对象本身（比如给 DOM 元素加元数据）
- 你希望这些数据随对象一起销毁，自动释放
- 键必须是对象（不能是字符串/数字），且这个对象要有明确的生命周期（比如 DOM 节点、某个 React 组件实例、某个服务实例等）

不适合场景：

- 用函数名、类名、全局常量做键（它们不会被回收）
- 想靠 WeakMap 自动「清理所有相关数据」——它只管键的弱引用，不负责值的清理逻辑，你得自己保证值也不会被其他强引用 hold 住



补充一个实战建议：如果只是缓存 DOM，其实根本不用 WeakMap

如果你只是想在组件里存个 DOM 引用，直接用 useRef 就够了：

const containerRef = useRef(null);



useEffect(() => {

  // 初始化 DOM

  containerRef.current = document.createElement('div');

  // 挂载逻辑...



  return () => {

    // 卸载时清理 DOM

    if (containerRef.current) {

      containerRef.current.remove();

      containerRef.current = null;

    }

  };

}, []);

DOM 元素本身会随组件卸载被移除，ref 也会在下次渲染时重置，不需要额外 WeakMap。除非你有跨组件共享缓存的需求（比如多个组件共享同一个 DOM 的元数据），才考虑 WeakMap。



最后再强调一次：WeakMap 不是「自动内存回收器」，它只是帮你避免手动管理引用关系。如果键对象本身还被其他地方引用着，它就永远不会被回收 —— 这和 GC 的基本原理是一致的。

你遇到的问题就是典型的「键没被回收」，不是 WeakMap 失效，而是你用错了键。换成 DOM 元素做键，或者换成组件实例（比如 class component 的 this），就能解决问题。

这个问题的核心在于你对WeakMap的误解。WeakMap确实使用弱引用来存储键，但这里的“弱引用”是指键本身是弱引用，而不是值。也就是说，当键被垃圾回收时，对应的值才会被清理。但在你的代码里，键是组件函数 MyComponent 本身，而函数对象在整个应用生命周期中是不会被销毁的，所以WeakMap里的值永远不会被自动清理。

我的做法是改用组件实例作为键，而不是组件函数。React函数组件每次渲染都会生成新的实例，这些实例在组件卸载后会被销毁，这样WeakMap才能正常工作。下面是修改后的代码：

const domRefs = new WeakMap();



function MyComponent() {

  const ref = useRef(null);

  useEffect(() => {

    const div = document.createElement('div');

    ref.current = div;

    domRefs.set(ref, div); // 使用ref对象作为键

    return () => {

      domRefs.delete(ref); // 确保手动清理

    };

  }, []);

  return <div>...</div>;

}

这里我把键从 MyComponent 换成了 ref 对象，因为 useRef 返回的ref对象是和组件实例绑定的，组件卸载时它也会被销毁，这样WeakMap就能正确清理对应的值了。

另外，如果你发现内存还是没降下来，可能是因为你在别的地方也持有了这个DOM节点的引用。比如某些全局变量、事件监听器或者其他数据结构也可能偷偷占用了它。建议你仔细检查一下代码，确保没有其他地方意外地保留了对这些DOM的引用。

最后吐槽一句，WeakMap看着挺美好，但实际用起来坑还不少，特别是涉及到React这种函数式组件的场景，稍不注意就容易踩坑。希望这次的改动能帮你解决问题！