关于React Reconciliation及Fiber树工作原理的理解验证问询

我正在深入研究React的底层工作机制，查阅了多篇文章，但所有文章对Reconciliation的描述均存在差异，且未提及Fiber tree与引擎。希望能对我关于该流程的理解进行纠正或补充，尤其是Fiber tree部分。

请问我对Fiber树及其工作机制的理解是否正确？

我的理解如下： #

初始渲染 #

1. React开始渲染根组件，这会调用组件树中每个组件的render方法（或在函数式组件中返回JSX）。
2. 创建Fiber树，并填充与每个组件对应的节点。
3. 基于渲染后的组件创建Virtual DOM。
4. 从Virtual DOM生成真实DOM并渲染到屏幕。
5. 配置Fiber树以管理和优化后续更新。

状态变更 #

1. 新Virtual DOM创建：基于组件当前的state和props创建新的Virtual DOM。
2. Reconciliation：React对比新Virtual DOM与旧Virtual DOM（非直接对比Fiber树）以识别变更内容。
3. Fiber树更新：Fiber树是跟踪这些更新的结构，树中的每个fiber节点会被更新以反映组件的新状态及Reconciliation中检测到的变更，随后向DOM传递待执行的更新指令列表。
4. 真实DOM更新：将必要的更新应用到真实DOM。

我查阅了大量文章，但各文章描述均存在细微差异，这让我感到困惑。

理解纠偏与补充 #

首先要明确：Fiber树本身就是React 16+版本中Virtual DOM的实现载体，你之前将Fiber树和Virtual DOM割裂的理解是核心偏差点。以下是修正后的完整流程：

初始渲染（React 16+） #

• React启动根组件渲染，触发函数组件执行（返回JSX）或类组件的render方法调用
• 直接构建Fiber树：JSX会被转换为React元素，React以此为基础创建对应的Fiber节点——每个Fiber节点对应一个组件/元素，存储了组件的props、state、DOM节点引用、更新优先级等关键信息，这一步就是构建Virtual DOM的过程
• 完成Fiber树构建后，React进入提交阶段，遍历Fiber树生成真实DOM节点并挂载到页面
• 构建完成的Fiber树会被保留，作为后续更新的"旧树"参考，无需额外配置

状态变更时的流程 #

• 组件state/props变更后，React会基于新状态生成新的React元素，但实际是创建新的Fiber节点片段，而非独立的Virtual DOM树
• Reconciliation（协调）就是新旧Fiber树的对比过程：React从根节点开始，对比新旧Fiber节点，通过key等策略识别节点的增删改，标记需要更新的节点（记录为待提交的副作用）
• Fiber树更新：协调过程中会直接更新Fiber节点的状态、props，并将DOM变更指令（如增删改）记录在Fiber节点的副作用链表中
• 提交阶段：React遍历副作用链表，将所有变更批量应用到真实DOM，完成页面更新

关键细节补充 #

• Fiber的核心价值是实现可中断的渲染：每个Fiber节点对应一个工作单元，React可以根据浏览器空闲时间分片处理这些单元，避免阻塞主线程
• Reconciliation属于渲染阶段，这个阶段的工作可被中断；真实DOM更新的提交阶段不可中断，必须一次性完成
• 类组件的shouldComponentUpdate、函数组件的memo都是在Reconciliation阶段生效，用于跳过不必要的Fiber节点对比

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