WeakMap 是函数式组件中管理私有状态的轻量级方案——通过以 DOM 节点为键实现状态封装、生命周期自同步与自动内存回收，配合不可变访问接口和副作用解耦，避免强引用泄漏。
WeakMap 是函数式组件中管理私有状态的轻量级方案——它不破坏纯函数特性，也不依赖 class 或 this，只需把组件函数与 DOM 节点或稳定标识绑定，就能实现“状态可封装、生命周期自同步、内存不泄漏”。
用 DOM 节点作键，天然匹配函数式渲染场景
函数式组件常返回 DOM 元素（如 document.createElement 或 JSX 渲染结果）。这些节点本身是对象，可直接作为 WeakMap 的键：
- 每次组件调用都生成新节点，WeakMap 自动为每个节点分配独立状态空间，无需手动区分实例
- 节点被卸载（
node.remove()或父容器innerHTML = ''）后，只要无其他强引用，对应状态随 GC 自动释放 - 不侵入节点原型，不污染属性，不影响
JSON.stringify(node)或序列化逻辑
封装成不可变访问接口，保持函数式语义
避免直接暴露 WeakMap，而是提供纯函数式的读写工具：
- 定义
useStateFor(node)：首次调用时初始化空对象并返回；后续调用只读取，不修改原始结构 - 状态更新通过
updateStateFor(node, patch)实现浅合并，而非赋值，符合不可变原则 - 所有操作接受节点为第一参数，返回新状态快照，不产生副作用，可安全用于 memoized 渲染逻辑
配合 useEffect 或事件委托，解耦状态与副作用
函数式组件中副作用（如定时器、监听器）常需关联私有状态。WeakMap 可让两者“共生”：
- 在事件回调中直接调用
useStateFor(node)获取当前状态，无需闭包捕获变量 - 若使用
useEffect，清理函数里不必手动销毁状态——WeakMap 条目随节点消失而失效，get()返回undefined，后续逻辑自然跳过 - 对动态插入的节点（如列表项），可在
MutationObserver中统一初始化状态，不依赖组件重执行
避免常见陷阱：确保弱引用真正生效
WeakMap 的优势只在引用链干净时成立：
- 不要把节点存进数组、Set 或全局对象——这会形成强引用，阻断 GC
- 事件监听器若用箭头函数并保存在外部变量中（如
const handler = () => {...}），会导致节点因闭包被间接持有；推荐用node.addEventListener('click', (e) => { ... })匿名内联写法 - 不给非 DOM 对象（如普通对象、字符串）当键，WeakMap 会抛错；校验可用
node instanceof Node
