React中diffing算法与React Fiber的区别、关联及执行顺序解析

你没有错误关联两个概念，二者同属React协调（Reconciliation）流程的组成部分，并非独立无关的技术点。

• Diffing算法是逻辑层面的对比规则：它定义了React对比新旧虚拟DOM、识别最小更新量的判断标准，这套规则在React15及更早版本的栈协调器时代就已经成型，核心规则包括同层对比、跨类型节点直接销毁重建、同类型节点对比属性差异、列表通过key匹配可复用节点等，核心目标是尽可能降低DOM更新的性能开销。
• React Fiber是架构层面的实现载体：是React16之后替换原有栈协调器的全新底层架构，核心由Fiber节点数据结构、可中断的调度逻辑两部分组成，解决的是旧版递归协调不可中断、长任务阻塞主线程导致页面掉帧的问题，支持按更新优先级调度任务。

React Fiber不仅使用了Diffing算法，且Diffing算法的执行完全依托Fiber架构承载，二者不存在功能重叠，是「规则」和「运行载体」的关系，具体执行流程如下：

1. 组件触发状态更新后，React会先根据最新的JSX生成新的虚拟DOM描述，正式进入Fiber协调阶段
2. 协调阶段会从根Fiber节点开始，以单个Fiber节点（每个Fiber节点对应一个组件/ DOM节点，存储节点状态、父子关联、更新标记等信息）为单位做分片遍历，这个遍历过程是可中断、可按优先级调度的——这是Fiber架构独有的能力
3. 每处理到一个Fiber节点时，就会严格按照Diffing算法的规则，对比当前旧Fiber节点和新虚拟DOM的差异：
   • 节点类型不同：标记旧Fiber为删除、新节点为插入
   • 节点类型相同：对比属性/子节点差异，标记属性更新
   • 列表节点：基于key匹配新旧节点，尽可能复用已有实例
4. 所有节点对比完成后，React会把所有带更新标记的Fiber节点收集到effect链中，进入不可中断的提交阶段，把标记的更新一次性应用到真实DOM上

可以用一个通俗的类比理解二者的关系：Diffing算法是菜谱里写的炒菜步骤、调味标准，React Fiber是升级后的现代化厨房，支持多灶眼调度、中途停手先处理更急的订单；在新厨房里做菜依然要遵循菜谱的标准，只是新厨房解决了旧厨房一旦开火就不能停、容易糊锅堵单的问题。

需要注意一个常见误区：Fiber不是新的Diff算法，Diff的核心对比逻辑从React普及虚拟DOM以来没有本质改动，Fiber重构的是Diff规则的运行环境，让整个对比过程可以被拆分成小任务分片执行，不阻塞浏览器的高优先级任务比如用户输入、动画渲染。

内容的提问来源于stack exchange，提问作者Shachi