weakmap适合存组件私有状态，因其键为弱引用对象，dom元素或实例被销毁且无其他强引用时，对应条目自动被gc回收，避免内存泄漏；而map会强引用导致节点无法释放。
WeakMap 为什么适合存组件私有状态
WeakMap 的键必须是对象，且对键的引用是弱引用——当 DOM 元素被移除、没有其他变量持有它时，WeakMap 中以该元素为键的条目会自动被垃圾回收器清理。这恰好匹配“组件实例销毁 → 状态自动释放”的需求，不用手动调用 delete 或维护清理逻辑。
常见错误是误用 Map：它会强持有 key（比如一个 div 元素），即使 DOM 已从文档中移除、也无其他引用，只要 Map 还存在，该元素就无法被 GC，造成内存泄漏。
使用场景包括：
- Web Components 中为每个
shadowRoot.host存储私有配置 - React 自定义 Hook 尝试模拟私有 state（需配合 ref）
- 封装第三方 UI 组件时，避免在元素上打属性标签（如
el.__privateState）
实际写法：绑定到 DOM 元素还是组件实例
关键判断点在于“谁真正拥有生命周期”。如果组件是基于类的、有明确的 destroy() 方法，把状态存在 WeakMap 里并以 this（即组件实例）为键更稳妥；但如果组件是函数式、或状态需与真实 DOM 节点强绑定（例如监听其 resize、依赖其 getBoundingClientRect()），那就必须以 DOM 元素为键。
示例：为每个按钮存点击计数，并在按钮被 remove() 后自动清理
const buttonState = new WeakMap();
<p>function initButton(el) {
if (!buttonState.has(el)) {
buttonState.set(el, { clicks: 0 });
}
el.addEventListener('click', () => {
const state = buttonState.get(el);
state.clicks++;
console.log(<code>clicked ${state.clicks} times</code>);
});
}</p><p>// 使用
const btn = document.createElement('button');
btn.textContent = 'Click me';
document.body.appendChild(btn);
initButton(btn);</p><p>// 后续执行 btn.remove() → btn 对象若无其他引用，buttonState 条目自动消失
</p>
注意：不能用字符串、数字、null 或 undefined 当键，否则报 TypeError: Invalid value used as weak map key。
与闭包 + Map 混用时的陷阱
有人会把 WeakMap 和闭包混用，比如在模块顶层声明 const stateMap = new WeakMap()，再导出一个工厂函数：
export function createCounter(el) {
const count = 0;
stateMap.set(el, { count }); // ✅ 正确：el 是键
return { inc() { stateMap.get(el).count++; } };
}
但若不小心写成：
stateMap.set(el, count); // ❌ 危险：count 是原始值，无法触发自动回收关联逻辑 // 因为 WeakMap 只对 key 弱引用，value 仍可能持有一个闭包引用 el（比如返回的函数里用了 el）
更隐蔽的问题是：如果 value 是一个对象，而该对象内部又持有对 key（DOM 元素）的引用（比如缓存了 el.parentElement），那即便 DOM 被移除，只要这个 value 对象还活着，GC 就无法清理 key —— WeakMap 不会穿透 value 做追踪。
所以 value 应尽量保持轻量，避免反向引用 DOM。
React / Vue 场景下要不要强行套用 WeakMap
不推荐在 React 函数组件里用 WeakMap 绑定到 ref.current 来模拟私有 state。因为：
-
ref.current在组件卸载后可能仍指向旧 DOM（尤其在异步回调中） - React 的 reconciler 可能复用 DOM 节点，导致 WeakMap 中残留旧状态
- React 自身的
useState/useRef已经做了生命周期对齐，更可靠
Vue 3 的 setup() 同理：优先用 ref 或 reactive，WeakMap 更适合底层库（如封装一个可复用的 useResizeObserver Hook，内部用 WeakMap 缓存 ResizeObserver 实例）。
真正需要 WeakMap 的地方，往往是那些脱离框架生命周期管理的 DOM 操作，比如：
- 直接操作
document.querySelectorAll('.chart')并为每个挂载状态 - 第三方图表库（如 Chart.js）初始化后需额外元数据，但不想污染实例属性
WeakMap 不是银弹，它的“自动回收”只在 key 真的彻底失联时才生效——如果你还拿着那个 DOM 元素的引用（比如全局变量、事件监听器没解绑、console.log 过它），回收就不会发生。
