一、Render 阶段 (The Render Phase)

关键词：可中断、纯计算、虚拟 DOM、Fiber

• 做什么:
  • React 从根组件开始，递归地调用所有组件函数（或类组件的 render 方法）。
  • 根据当前的 props 和 state，计算出新的 React Element 树（即虚拟 DOM）。
  • 将新树与旧树进行对比（Diffing），找出差异。
  • 标记出哪些节点需要新增、更新、删除或移动。这些标记被称为 副作用（Effects）。
• 核心特性：
  • 纯函数 (Pure)：这个阶段不能产生任何“副作用”（如修改全局变量、发起网络请求、直接操作 DOM）。因为如果渲染过程中断或重试，这些副作用可能会重复执行或导致状态不一致。
  • 可中断 (Interruptible)：这是 React 16+ 引入 Fiber 架构 后的最大变革。React 将这个庞大的任务拆分成许多小的工作单元（Unit of Work）。如果浏览器主线程繁忙（例如用户正在打字），React 可以暂停渲染，让出控制权给浏览器，等空闲了再回来继续。这意味着 Render 阶段可能会执行多次，甚至被丢弃重做。
• 产出物：
  • 一棵带有副作用标记的 WorkInProgress 树（内存中的新树），准备用于下一步。

二、Commit 阶段 (The Commit Phase)

关键词：不可中断、副作用、真实 DOM、同步

• 做什么:
  • React 将 Render 阶段计算出的变更，真正应用到屏幕上。
  • 执行所有标记好的副作用，具体包括三个子步骤：
    1. Before Mutation：读取最新的 DOM 信息（主要用于 getSnapshotBeforeUpdate 或 useLayoutEffect 的依赖收集）。
    2. Mutation：真正操作真实 DOM（增删改节点）。
    3. Layout：执行布局相关的副作用（如 componentDidMount, componentDidUpdate, useLayoutEffect）。
    4. (注：useEffect 和 componentDidMount 的部分逻辑通常在浏览器绘制屏幕后异步执行，但也属于广义的提交后处理)。
• 核心特性：
  • 同步且不可中断 (Synchronous & Non-interruptible)：一旦进入 Commit 阶段，React 必须一口气做完所有工作，不能暂停。因为此时已经在操作真实的 DOM，如果中途暂停，用户会看到界面处于“半更新”的闪烁或不一致状态。
  • 性能瓶颈：由于不可中断，如果 Commit 阶段耗时过长（例如更新了成千上万个节点），会直接阻塞浏览器主线程，导致页面卡顿（掉帧）。因此，优化 React 性能的关键往往在于减少 Commit 阶段的工作量，或者利用并发特性将工作分摊到 Render 阶段。
• 产出物：
  • 用户最终看到的、更新后的 真实 UI 界面。

为什么通常只说这两个阶段？

因为在 React 的源码实现和核心设计理念中，“调度（Scheduler）” 并不是一个独立的执行阶段，而是一个管理机制。

• 调度器 (Scheduler) 负责决定：“现在是不是该开始 Render 阶段了？”、“Render 阶段做了多久了？要不要暂停？”、“哪个更新优先级更高？”。
• 它像是在 Render 阶段外面包裹的一层“指挥官”，指挥 Render 阶段何时运行、运行多久，但它本身不执行具体的组件渲染或 DOM 操作。

所以，当我们讨论 React 内部执行流程时，最本质的划分就是：

1. 算（Render）：在内存里算清楚该怎么变（可以慢慢算，随时停）。
2. 改（Commit）：动手把屏幕改了（必须快，不能停）。

[触发更新] 
    ↓
[Scheduler 调度] <--- (决定优先级和时间切片)
    ↓
[ 1. Render 阶段 ] 
   - 调用组件
   - 生成 Virtual DOM
   - Diff 对比
   - 标记副作用
   (✅ 可中断，可重试)
    ↓
[ 2. Commit 阶段 ]
   - 更新真实 DOM
   - 执行 useLayoutEffect
   - 执行生命周期
   (❌ 不可中断，同步执行)
    ↓
[ 浏览器绘制屏幕 (Paint) ]
    ↓
[ 执行 useEffect (异步) ]

这种“两阶段”模型是理解 React 性能优化（如 memo, useMemo, useCallback 主要是优化 Render 阶段；代码分割主要是减少初次 Commit 负担）以及并发特性（Concurrent Features）的基础。