Map 不直接参与虚拟 DOM diff，但框架用它优化带 key 列表的节点查找：将旧节点按 key 存入 Map 实现 O(1) 查找，加速复用判断，仅用于多节点 diff 的 fallback 阶段，且只缓存 VNode 而非真实 DOM。
Map 本身不直接参与虚拟 DOM 的 diff 算法，它也不是 diff 过程的内置机制。但开发者或框架内部**可以用 Map 来优化 key 到节点的映射查找**，从而加速多节点列表的比对过程——尤其是在「有 key」的列表 diff 阶段。
Key 检索为什么需要 Map
当新旧两组子节点（比如 ul 下的多个 li）都带 key 时，diff 算法需快速判断：某个 key 在旧节点中是否存在、对应哪个旧节点。如果每次都要遍历旧节点数组找匹配项，时间复杂度是 O(n²)；而用 Map 把旧节点按 key 存起来，查找就是 O(1)。
例如：
- 旧列表：
[{key: 'a', ...}, {key: 'b', ...}, {key: 'c', ...}] - 构建 Map：
const oldKeyToVNode = new Map([['a', vnodeA], ['b', vnodeB], ['c', vnodeC]]) - 遇到新节点
{key: 'b', ...}，直接oldKeyToVNode.get('b')拿到可复用的旧节点
Map 在 diff 列表阶段的实际作用位置
它只在「多节点 diff」路径中启用，且前提是节点有合法、稳定的 key：
立即学习“Java免费学习笔记（深入）”；
- 单节点（如
div下只有一个p）不走 Map，直接递归比对 - 多节点（如
ul下有多个li）才进入列表 diff，此时先用双端试探（头/尾四组比对），没命中再查 Map - Map 是 fallback 查找的加速结构，不是唯一路径，但现代实现（React 18、Vue 3）普遍采用
注意：Map 存的是 VNode，不是真实 DOM
虚拟 DOM 的 diff 发生在 JavaScript 对象之间，Map 缓存的是旧的虚拟节点对象（VNode），不是 DOM 元素本身。它的价值在于避免重复遍历、提升复用判断效率，而不是操作真实页面。
- key 相同 → 复用该 VNode 实例（保留组件状态、input 光标等）
- key 不存在于 Map 中 → 视为新增节点，创建新 VNode
- 旧 Map 中有 key 但新列表没有 → 该旧 VNode 被标记为“待卸载”
不推荐手动用 Map 替代框架 diff
你不需要、也不应该在业务代码里自己 new Map 去管理 key 查找。React 的 key、Vue 的 :key 已由框架底层自动完成 Map 构建与检索。手动干预反而容易破坏一致性，比如：
- 用 index 当 key → Map 键不稳定，导致错误复用
- key 动态生成或重复 → Map 冲突，覆盖旧节点引用
- 绕过框架直接操作 Map → 跳过生命周期、丢失 ref 或 memo 缓存
