WeakMap 适合绑定组件与状态，因其 key 为对象且弱引用，组件实例销毁时状态自动回收，且不可遍历，保障封装性与内存安全。
WeakMap 可以用来建立组件实例和私有状态之间的映射，既避免内存泄漏，又保证状态封装性——关键在于用组件实例本身作 key，让状态随组件自动回收。
为什么 WeakMap 适合绑定组件与状态
WeakMap 的 key 必须是对象，且对 key 是弱引用：当组件实例（如 class 实例或 DOM 元素）被销毁、无其他引用时，WeakMap 中对应的条目会自动被垃圾回收。这比 Map 或普通对象更安全，不会阻止组件卸载时的清理。
同时，WeakMap 外部无法遍历或获取所有键值，天然隐藏状态，防止外部篡改。
基础绑定模式：实例为 key，状态为 value
在组件类内部，用 WeakMap 存储每个实例专属的状态对象：
立即学习“Java免费学习笔记（深入）”；
const componentState = new WeakMap();
class Counter {
constructor() {
// 为当前实例初始化私有状态
componentState.set(this, { count: 0 });
}
increment() {
const state = componentState.get(this);
state.count++;
console.log(state.count);
}
getCount() {
return componentState.get(this)?.count ?? 0;
}
}
这样每个 Counter 实例都有独立状态，互不干扰；一旦实例被 GC，其状态也自动消失。
结合 React 函数组件（配合 useRef）
函数组件没有 this，但可用 useRef 创建唯一对象引用作为 key：
import { useRef, useEffect } from 'react';
const stateMap = new WeakMap();
function MyComponent({ initial }) {
const instanceRef = useRef({});
// 首次挂载时初始化状态
if (!stateMap.has(instanceRef.current)) {
stateMap.set(instanceRef.current, { data: initial, loaded: false });
}
const state = stateMap.get(instanceRef.current);
useEffect(() => {
// 清理时无需手动删除 —— instanceRef.current 被丢弃后，WeakMap 条目自动释放
return () => {
// 通常不需要做任何事
};
}, []);
return <div>{state.data}</div>;
}
注意：不能用 useRef({}) 每次都新建对象（会丢失绑定），必须复用同一个 ref 对象。
进阶：统一管理 + 类型提示（TypeScript）
可封装一个类型安全的“状态容器”：
type ComponentState<T> = { [K in keyof T]?: T[K] };
class StateRegistry<T> {
private map = new WeakMap<object, Partial<T>>();
get(instance: object): Partial<T> {
return this.map.get(instance) ?? {};
}
set(instance: object, partial: Partial<T>) {
const existing = this.map.get(instance) ?? {};
this.map.set(instance, { ...existing, ...partial });
}
delete(instance: object) {
this.map.delete(instance);
}
}
// 使用
const counterStates = new StateRegistry<{ count: number; lastUpdate: Date }>();
class Counter {
constructor() {
counterStates.set(this, { count: 0, lastUpdate: new Date() });
}
}
这种封装让逻辑更清晰，也便于复用和测试。
