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

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

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

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

虚拟DOM核心原理

1. 概念：
   • 虚拟DOM（Virtual DOM）是一个轻量级的JavaScript对象，用于描述真实DOM的结构。React通过虚拟DOM抽象真实DOM，避免直接操作高成本的真实DOM。
   • 当组件状态变化时，React会重新生成新的虚拟DOM树，并与旧树进行对比（Diff算法），找出差异后仅更新真实DOM中必要的部分。

2. 优势：
   • 性能优化：减少直接操作DOM的次数，通过批量更新和差异化渲染提升性能。
   • 跨平台：虚拟DOM可映射到不同平台（如Web、Native），实现统一开发模式。

Diff算法优化策略

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

1. 同级比较（Tree Diff）：
   • 策略：仅对同一层级的节点进行比较，忽略跨层级的移动（如节点从第2层移动到第3层会被视为销毁后重建）。
   • 原因：跨层级操作在实际业务中极少出现，此策略将算法复杂度从O(n³)降低到O(n)。

   // 旧树
   <div>
     <ComponentA />
   </div>
   
   // 新树（ComponentA移动到子层级）
   <div>
     <p>
       <ComponentA /> {/* 会被销毁并重新创建 */}
     </p>
   </div>
   

2. Key的作用：
   • 核心功能：在列表渲染中，通过唯一key标识元素，帮助React识别节点的添加、删除或顺序变化。
   • 错误示例：使用数组索引（index）作为key可能导致状态错乱（如列表中间插入元素时）。
   • 正确用法：

   {items.map(item => (
     <li key={item.id}>{item.text}</li> // 唯一且稳定的标识
   ))}
   

3. 组件类型判断：
   • 策略：若新旧组件类型不同（如从<Button>变为<Link>），直接销毁旧组件及其子树，创建新组件。
   • 意义：避免无效的属性和状态对比，确保组件逻辑隔离。

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

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

1. 可中断渲染：
   • **并发模式（Concurrent Mode）**允许React在Diff过程中暂停渲染，优先处理高优先级任务（如用户输入）。
   • 影响：Diff算法可能分阶段执行，需保证中断后恢复的一致性，避免部分更新导致UI撕裂。

2. 优先级调度：
   • 策略：根据更新来源（如用户交互 vs 数据加载）分配优先级，高优先级Diff任务优先执行。
   • 示例：输入框输入时，startTransition标记低优先级更新，确保输入流畅。

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

3. 时间切片（Time Slicing）：
   • 机制：将Diff过程拆分为多个小任务，每帧执行一部分，避免长时间阻塞主线程。
   • 效果：提升大型应用响应能力，保持动画和交互的流畅性。

总结

• 虚拟DOM核心：通过JS对象抽象DOM，结合Diff算法实现高效更新。
• Diff优化：同级比较、Key标识、组件类型判断是三大核心策略。
• React 18进阶：并发模式引入可中断渲染和优先级调度，使Diff过程更智能，适应复杂交互场景。