第一节：React 基础篇-React虚拟DOM原理及Diff算法优化策略

必考点：虚拟DOM树对比（同级比较、Key的作用、组件类型判断）

延伸：React 18中并发更新对Diff算法的影响

React虚拟DOM原理及Diff算法优化策略

虚拟DOM核心原理

概念：

• 虚拟DOM（Virtual DOM）是一个轻量级的JavaScript对象，用于描述真实DOM的结构。React通过虚拟DOM抽象真实DOM，避免直接操作高成本的真实DOM。

• 当组件状态变化时，React会重新生成新的虚拟DOM树，并与旧树进行对比（Diff算法），找出差异后仅更新真实DOM中必要的部分。
优势：

• 性能优化 ：减少直接操作DOM的次数，通过批量更新和差异化渲染提升性能。

• 跨平台：虚拟DOM可映射到不同平台（如Web、Native），实现统一开发模式。

Diff算法优化策略

React的Diff算法遵循以下核心策略以提升比较效率：

同级比较（Tree Diff） ：

• 策略：仅对同一层级的节点进行比较，忽略跨层级的移动（如节点从第2层移动到第3层会被视为销毁后重建）。

• 原因：跨层级操作在实际业务中极少出现，此策略将算法复杂度从O(n³)降低到O(n)。
jsx 复制代码
```
// 旧树
<div>
  <ComponentA />
</div>

// 新树（ComponentA移动到子层级）
<div>
  <p>
    <ComponentA /> {/* 会被销毁并重新创建 */}
  </p>
</div>
```
Key的作用 ：

• 核心功能 ：在列表渲染中，通过唯一key标识元素，帮助React识别节点的添加、删除或顺序变化。

• 错误示例 ：使用数组索引（index）作为key可能导致状态错乱（如列表中间插入元素时）。

• 正确用法：
jsx 复制代码
```
{items.map(item => (
  <li key={item.id}>{item.text}</li> // 唯一且稳定的标识
))}
```
组件类型判断 ：

• 策略：若新旧组件类型不同（如从<Button>变为<Link>），直接销毁旧组件及其子树，创建新组件。

• 意义：避免无效的属性和状态对比，确保组件逻辑隔离。
jsx 复制代码
```
// 旧组件
<Button onClick={handleClick} />

// 新组件（类型变化）
<Link onClick={handleClick} /> {/* 触发完整卸载和挂载 */}
```

React 18并发更新对Diff算法的影响

可中断渲染 ：

• **并发模式（Concurrent Mode）**允许React在Diff过程中暂停渲染，优先处理高优先级任务（如用户输入）。

• 影响：Diff算法可能分阶段执行，需保证中断后恢复的一致性，避免部分更新导致UI撕裂。

优先级调度 ：

• 策略：根据更新来源（如用户交互 vs 数据加载）分配优先级，高优先级Diff任务优先执行。

• 示例：输入框输入时，startTransition标记低优先级更新，确保输入流畅。

jsx 复制代码

const [isPending, startTransition] = useTransition();
const handleInput = (e) => {
  setInputValue(e.target.value); // 高优先级（立即更新）
  startTransition(() => {
    setSearchQuery(e.target.value); // 低优先级（可中断）
  });
};

时间切片（Time Slicing） ：

• 机制：将Diff过程拆分为多个小任务，每帧执行一部分，避免长时间阻塞主线程。

• 效果：提升大型应用响应能力，保持动画和交互的流畅性。

总结

• 虚拟DOM核心 ：通过JS对象抽象DOM，结合Diff算法实现高效更新。

• Diff优化 ：同级比较、Key标识、组件类型判断是三大核心策略。

• React 18进阶：并发模式引入可中断渲染和优先级调度，使Diff过程更智能，适应复杂交互场景。