【React】setState 触发渲染的流程

概述

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

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

详细流程

创建 update

const update = {
  payload: newState,
  lane: priority
};

加入更新队列

fiber.updateQueue.enqueue(update);

调度更新

scheduleUpdateOnFiber(fiber);

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

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

因为：

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

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

rerender 是"函数重新执行"，不是 DOM 直接更新
React diff 是基于"同层 + key + 类型"的算法

render vs commit

render 阶段（可中断）

• 计算 diff
• 构建 Fiber 树

commit 阶段（不可中断）

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

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