【React】setState 触发渲染的流程

概述

1. setState 本质是向React Fiber 树中加入一个更新（update）
2. 触发调度（schedule）
3. 在协调阶段（reconciliation）通过 diff 算法计算变更
4. 最终在提交阶段（commit）更新 DOM。

setState ↓ 创建 update 对象 ↓ 加入 Fiber updateQueue ↓ 调度更新（schedule） ↓ render 阶段（diff） ↓ commit 阶段（更新 DOM）

详细流程

创建 update

constupdate={payload:newState,lane:priority};

加入更新队列

fiber.updateQueue.enqueue(update);

调度更新

scheduleUpdateOnFiber(fiber);

React 18 使用 Lane 模型来管理优先级（替代 expirationTime）

为什么 setState 会导致组件重新执行？

因为：

• Fiber 标记为“需要更新”
• React 会重新执行函数组件（或 class render）

functionApp(){// setState 后，这个函数会重新执行}

rerender 是“函数重新执行”，不是 DOM 直接更新

React diff 是基于“同层 + key + 类型”的算法

render vs commit

render 阶段（可中断）执行函数组件，生成新的虚拟 DOM

• 计算 diff（协调算法 reconciliation）
• 构建 Fiber 树

commit 阶段（不可中断）

• 更新 DOM
• 执行副作用（useEffect）

commit 是同步执行的，保证 UI 一致性