React虚拟DOM与Diff算法详解

一、问题描述
虚拟DOM（Virtual DOM）是React的核心特性之一，它通过JavaScript对象模拟真实DOM结构，在数据变化时先比较虚拟DOM的差异，再最小化更新真实DOM。面试常考察其设计动机、工作原理，尤其是Diff算法的优化策略。

二、虚拟DOM的作用与设计动机

1. 背景问题：

   • 直接操作真实DOM成本高（重排、重绘）。
   • 传统数据变化时，频繁更新DOM会导致性能瓶颈。

2. 虚拟DOM的优势：

   • 将多次DOM操作合并为一次批量更新。
   • 通过Diff算法精准定位变化部分，避免全量更新。

三、虚拟DOM的创建与比较流程

1. 虚拟DOM结构：

   • 用JS对象描述DOM节点，包含标签名、属性、子节点等信息。
   • 示例：

     const vNode = {
       type: 'div',
       props: { className: 'header' },
       children: [
         { type: 'span', children: 'Hello' }
       ]
     };
     

2. Diff算法核心逻辑：

   • 同级比较：仅对比同一层级的节点，避免跨层级对比（时间复杂度从O(n³)降至O(n)）。
   • 节点类型判断：
     • 类型不同（如div变为p）：直接销毁旧节点及其子树，创建新节点。
     • 类型相同：更新属性（如className），递归对比子节点。
   • 列表节点的Key优化：
     • 通过key标识节点身份，避免直接按索引对比导致的误删/重建。
     • 示例：列表[A, B, C]中插入D（位置在A后），无key时B、C会被误认为变化；有key时仅插入D。

四、Diff算法的具体步骤

1. 深度优先遍历：

   • 从根节点开始，递归比较新旧虚拟DOM树。

2. 属性更新策略：

   • 合并新旧属性，新增或修改属性（如style），删除旧属性。

3. 子节点对比（核心）：

   • 通过双指针遍历新旧子节点列表：
     • 新前与旧前对比（类型相同则复用节点）。
     • 新后与旧后对比（类型相同则复用）。
     • 新后与旧前对比（相同则移动节点至末尾）。
     • 新前与旧后对比（相同则移动节点至开头）。
   • 若均不匹配，则检查旧节点中是否有可复用的（通过key映射）。

五、虚拟DOM的更新到真实DOM

1. 生成补丁（Patch）：

   • Diff结果生成具体的DOM操作指令（如ADD_NODE、REMOVE_NODE）。

2. 批量更新：

   • 将补丁应用至真实DOM，避免中间状态触发多次渲染。

六、示例说明
假设新旧虚拟DOM如下：

// 旧
{ type: 'ul', children: [
  { type: 'li', key: 'a', children: 'A' },
  { type: 'li', key: 'b', children: 'B' }
]}

// 新
{ type: 'ul', children: [
  { type: 'li', key: 'c', children: 'C' }, // 新增
  { type: 'li', key: 'a', children: 'A' }, // 移动
  { type: 'li', key: 'b', children: 'B' }  // 移动
]}

Diff过程：

1. 检测到key='c'的新节点，在旧列表中未找到，创建新节点。
2. key='a'和key='b'的节点存在，移动位置至c后。
3. 最终仅插入一个节点并调整顺序，避免重建所有节点。

七、总结
虚拟DOM通过JS计算优化DOM操作，Diff算法通过同级比较、Key标识等策略减少性能开销。这一机制在复杂UI场景下显著提升渲染效率，但简单页面可能因额外JS计算反而变慢，需结合实际场景评估。