一、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 阶段计算出的变更真正应用到屏幕上。执行所有标记好的副作用具体包括三个子步骤Before Mutation读取最新的 DOM 信息主要用于getSnapshotBeforeUpdate或useLayoutEffect的依赖收集。Mutation真正操作真实 DOM增删改节点。Layout执行布局相关的副作用如componentDidMount,componentDidUpdate,useLayoutEffect。(注useEffect和componentDidMount的部分逻辑通常在浏览器绘制屏幕后异步执行但也属于广义的提交后处理)。核心特性同步且不可中断 (Synchronous Non-interruptible)一旦进入 Commit 阶段React 必须一口气做完所有工作不能暂停。因为此时已经在操作真实的 DOM如果中途暂停用户会看到界面处于“半更新”的闪烁或不一致状态。性能瓶颈由于不可中断如果 Commit 阶段耗时过长例如更新了成千上万个节点会直接阻塞浏览器主线程导致页面卡顿掉帧。因此优化 React 性能的关键往往在于减少 Commit 阶段的工作量或者利用并发特性将工作分摊到 Render 阶段。产出物用户最终看到的、更新后的真实 UI 界面。为什么通常只说这两个阶段因为在 React 的源码实现和核心设计理念中“调度Scheduler”并不是一个独立的执行阶段而是一个管理机制。调度器 (Scheduler)负责决定“现在是不是该开始 Render 阶段了”、“Render 阶段做了多久了要不要暂停”、“哪个更新优先级更高”。它像是在 Render 阶段外面包裹的一层“指挥官”指挥 Render 阶段何时运行、运行多久但它本身不执行具体的组件渲染或 DOM 操作。所以当我们讨论 React内部执行流程时最本质的划分就是算Render在内存里算清楚该怎么变可以慢慢算随时停。改Commit动手把屏幕改了必须快不能停。[触发更新] ↓ [Scheduler 调度] --- (决定优先级和时间切片) ↓ [ 1. Render 阶段 ] - 调用组件 - 生成 Virtual DOM - Diff 对比 - 标记副作用 (✅ 可中断可重试) ↓ [ 2. Commit 阶段 ] - 更新真实 DOM - 执行 useLayoutEffect - 执行生命周期 (❌ 不可中断同步执行) ↓ [ 浏览器绘制屏幕 (Paint) ] ↓ [ 执行 useEffect (异步) ]这种“两阶段”模型是理解 React 性能优化如memo,useMemo,useCallback主要是优化 Render 阶段代码分割主要是减少初次 Commit 负担以及并发特性Concurrent Features的基础。