WeakMap 是函数式组件中实现无副作用私有状态的理想工具，因其以弱引用绑定组件实例或 ref 对象，不污染对象、不干扰生命周期、无需手动清理，卸载后状态自动回收。
WeakMap 是函数式组件架构中实现“无副作用私有状态”的理想工具——它不污染组件对象、不干扰生命周期、也不需要手动清理。关键在于把 WeakMap 当作一个外部不可见、但组件内部可安全读写的“隐形附着点”。
为什么函数式组件需要 WeakMap 来管理私有状态
纯函数式组件本不该持有状态，但现实场景中常需缓存计算结果、标记渲染状态（如是否已初始化）、或绑定事件回调引用。若用普通对象或 Map 存储，容易导致：
- DOM 节点或组件实例被意外强引用，卸载后内存无法释放
- 状态挂载在 props 或返回的 JSX 上，破坏不可变性与纯净性
- 多个同类型组件实例共享同一份状态，引发交叉污染
核心实现模式：模块级 WeakMap + 组件闭包封装
WeakMap 必须声明在模块顶层（而非组件内部），确保单例复用；组件通过闭包访问它，并以自身引用（如 ref.current 或组件函数 identity）为键写入数据：
- 组件函数本身不能直接当 key（不是对象），推荐配合 useRef 或传入 DOM 节点/自定义对象标识符
- 若用 React，可将 ref.current 作为 key —— 它是稳定对象，且随组件卸载自然失活
- 避免用字符串、数字或 null 作 key，WeakMap 会直接抛错
典型用法示例：缓存昂贵计算 & 防止重复初始化
假设一个函数式组件需根据 props 派生复杂数据，又不想每次渲染都重算：
- 声明 const cache = new WeakMap() 在文件顶部
- 组件内用 const instance = useRef({}).current 创建唯一对象标识
- 首次调用时 cache.set(instance, expensiveResult)，后续直接 cache.get(instance)
- 组件卸载后，instance 失去所有强引用，WeakMap 条目自动消失
注意事项：别让 WeakMap 变成“假弱引用”
WeakMap 本身不解决间接引用泄漏。常见陷阱包括：
- 把事件处理器存进 WeakMap，但又把它传给 addEventListener 并未移除 → 实例因 handler 闭包持有了 this，无法回收
- 在 useEffect 中创建定时器并闭包捕获 instance，却忘了 clearTimeout → 引用链未断
- 误将 WeakMap 实例暴露给外部模块或全局变量，破坏封装性
WeakMap 只保证“键对象死亡即条目消失”，不负责值内部的引用关系。真正纯粹的函数式架构，得靠 WeakMap + 显式资源管理双保险。
