#Virtual DOM 和 Diff 算法

React 是怎么快速更新页面的？

#什么是 Virtual DOM？

Virtual DOM 是真实 DOM 的 JavaScript 对象表示。

它是一个轻量级的抽象层，让 React 可以用 JS 对象来描述 DOM 结构。

#核心价值

• 性能保障：通过 Diff 算法找出最小变更，避免全量更新
• 跨平台：JS 对象可以渲染到 Web、React Native、小程序等
• 声明式：只关心状态，不用手动操作 DOM

#Diff 策略

把旧树和新树对比，找出差异，这个过程叫 Reconciliation（协调）。

#复杂度优化

传统对比是 O(n³)，React 把它降为 O(n)，靠的是几个启发式规则：

1. 同层级比较：Web UI 很少跨层级移动，React 只比较同级
2. 类型不同就重建：<div> 变 <p>，直接销毁重建，不深度对比
3. Key 标识：用 Key 识别节点身份

#Diff 流程

#单节点

Key 和 Type 相同就复用，否则重建。

#多节点（列表 Diff）

第一轮：遍历新旧列表，Key/Type 匹配就复用，不匹配就停。

第二轮：处理剩余节点。

• 建立 Map（key -> oldNode）快速查找
• 只向右移动：React 用 lastPlacedIndex 记录位置，通过 insertBefore 移动

#为什么不能用 index 做 Key？

1. 性能差：头部插入元素，index 全变了，所有后续节点都无法复用，全部更新
2. 状态错乱：列表项有内部状态（如 input 文字），复用错误会导致数据错位

#总结

概念	作用
Virtual DOM	DOM 的 JS 对象表示
Diff	找新旧树的差异
Key	识别节点身份
同层比较	降低复杂度

Virtual DOM + Diff 就是 React 保持高性能的秘诀。