React 核心工作流程两阶段：Render 阶段和 Commit 阶段

一、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）的基础。