JavaScript中用WeakMap实现组件缓存，键为组件实例（弱引用），实例销毁时缓存自动回收；值可为任意类型，不支持遍历/clear；配合FinalizationRegistry可做非关键资源清理，但需避开原始值作键、循环引用等陷阱。
JavaScript 中利用弱引用机制管理组件关联缓存，核心是让缓存不干扰组件的生命周期——组件被销毁时，缓存自动消失，无需手动清理。
用 WeakMap 存储组件私有缓存
WeakMap 是最常用、最直接的方式。它的键必须是组件实例（对象），且对键是弱引用；一旦组件实例脱离所有强引用（比如组件卸载、变量置 null），它就会被垃圾回收，对应缓存条目也自动失效。
- 缓存键只能是组件实例本身（如 class 实例、React 组件 ref 对象、Vue 组件 proxy），不能是 id 字符串或数字
- 值可以是任意类型：计算结果、DOM 节点、上次渲染时间戳、异步请求 Promise 等
- 不支持遍历、没有 size、不能 clear()，这反而是优势——避免误操作或调试时意外保留引用
典型使用模式示例
以一个通用工具函数为例，封装缓存读写逻辑：
const componentCache = new WeakMap();
function getComponentCache(instance) {
if (!componentCache.has(instance)) {
componentCache.set(instance, new Map());
}
return componentCache.get(instance);
}
// 使用
class MyComponent {
render() {
const cache = getComponentCache(this);
let data = cache.get('expensiveResult');
if (data === undefined) {
data = this.computeExpensiveData();
cache.set('expensiveResult', data);
}
return data;
}
}
组件实例 this 被销毁后，getComponentCache(this) 返回的 Map 也会随 WeakMap 条目一起被 GC 清理，无残留。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
搭配 FinalizationRegistry 做轻量级清理收尾
WeakMap 本身不提供“回收通知”，如果缓存中持有需显式释放的资源（如 EventListener、WebGL 纹理、自定义计时器），可配合 FinalizationRegistry 在组件被回收时触发清理：
- 创建 registry 时注册回调，传入组件实例和清理逻辑
- 调用 registry.register(instance, { cleanup }, instance) —— 第三个参数是“holdings”，通常就传 instance 本身
- 当 instance 被 GC 回收时，回调执行，释放外部资源
注意：FinalizationRegistry 的回调时机不确定，仅适合非关键性清理（如日志、统计），不可依赖它保证资源立即释放。
避开常见陷阱
弱引用不是万能解药，错误用法反而掩盖问题：
- 不要用 WeakMap 缓存原始值（字符串、数字）作键——会直接报 TypeError
- 不要在缓存值中强引用组件实例（比如存一个闭包里捕获 this），否则形成循环引用，阻止回收
- 避免把 WeakMap 实例挂到全局或长期存活对象上，否则它自身可能意外延长键的生命周期（虽然键仍是弱引用，但 WeakMap 存活本身不影响 GC）
- 测试时别依赖 console.log(weakMap) 查看内容——它不可遍历，DevTools 显示为空或不完整
