用Map缓存动态组件实例需以唯一稳定可序列化的键（如字符串ID或Symbol）关联组件，避免重复创建；应封装ComponentCache类统一管理增删查，并结合框架生命周期调用destroy清理资源，确保状态隔离。
用 Map 缓存动态组件实例，核心是用**唯一、稳定、可序列化的键**（如字符串 ID 或 Symbol）关联组件对象，避免重复创建，同时支持按需取用和清理。
选对 key：避免用对象或随机数当键
Map 的键是引用相等的，若用普通对象（如 { id: 'user-1' }）作 key，每次新建都算新键，缓存失效；用随机数或时间戳更不可靠。推荐方式：
- 用组件唯一标识字符串，如
'UserCard:user-123'、'Modal:settings' - 用
Symbol.for('MyComponent:user-123')（跨模块共享时更安全） - 若组件有稳定 DOM 节点，可用
node.id或node.dataset.key作为 key 来源
封装缓存管理器：统一创建、获取、销毁
不建议在各处直接操作 Map，封装一个轻量类更可控：
class ComponentCache {
constructor() {
this.map = new Map();
}
get(key) {
return this.map.get(key) || null;
}
set(key, instance) {
// 可选：自动清理旧实例（如 React 组件需卸载）
const old = this.map.get(key);
if (old && typeof old.destroy === 'function') {
old.destroy();
}
this.map.set(key, instance);
}
delete(key) {
const instance = this.map.get(key);
if (instance && typeof instance.destroy === 'function') {
instance.destroy();
}
return this.map.delete(key);
}
clear() {
for (const instance of this.map.values()) {
if (typeof instance.destroy === 'function') {
instance.destroy();
}
}
this.map.clear();
}
}
// 使用
const cache = new ComponentCache();
cache.set('DatePicker:range', datePickerInstance);
const cached = cache.get('DatePicker:range'); // 复用
结合框架生命周期自动管理（以原生/自定义组件为例）
动态组件常需响应销毁逻辑（如移除事件监听、清除定时器）。可在组件实例上暴露 destroy() 方法，并在缓存 set/delete 时调用：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- Vue：在
beforeUnmount中调用cache.delete(key) - React：在
useEffect清理函数中调用cache.delete(key) - 纯 JS 自定义元素：在
disconnectedCallback中清理
这样既复用实例，又不累积内存泄漏。
注意深浅拷贝与状态隔离
缓存的是组件实例引用，不是副本。若多个地方共用同一实例，它们的状态（如输入值、展开状态）会相互影响。解决方法：
- 确保 key 粒度足够细（如
'ChatInput:room-789:user-456'），让每个实例对应唯一上下文 - 组件内部不依赖全局状态，所有状态通过 props 或独立 store 管理
- 需要“克隆”行为时，改用工厂函数 + Map 缓存构造器，而非实例本身
