React---渲染阶段

React 渲染更新流程

触发更新 => schedule（调度阶段）=> reconciler（协调阶段）=> render（渲染阶段）=> commit（提交阶段）

(1) Schedule 阶段（调度）

• 触发时机：组件状态变更（setState/useState）、props变化、父组件渲染、context变化、首次渲染等。
• 核心任务：
• • 为更新分配优先级（Lane模型）
  • 将更新任务加入任务队列
  • 调度任务执行（使用浏览器API如requestIdleCallback或setTimeout模拟）
• 关键特点：
• • 可中断：高优先级任务可中断低优先级任务
  • 时间切片：将任务分割为5ms左右的小任务块

(2) Reconciler 阶段（协调/渲染）

• 工作内容：
• • 从根节点开始遍历Fiber树
  • 调用组件render方法，生成虚拟DOM
  • 对比新旧Fiber节点（Diff算法）
  • 标记副作用（如插入、更新、删除）
• 输出：
• • 一棵带有副作用的Fiber树（workInProgress树）
  • 一个副作用链表（effect list）
• 关键特点：
• • 可中断：在5ms时间片用尽时暂停，返回调度阶段
  • 纯内存操作：不涉及真实DOM，因此可反复重试

(3) Commit 阶段（提交）

• 工作内容：
• • 遍历副作用链表，执行DOM更新
  • 执行生命周期方法（类组件）和Hook回调（如useLayoutEffect）
  • 调度useEffect的异步回调
• 子阶段：
• • Before mutation：执行getSnapshotBeforeUpdate
  • Mutation：执行DOM操作
  • Layout：执行componentDidMount/Update、useLayoutEffect
• 关键特点：
• • 不可中断：必须一次性执行完成，否则会导致UI不一致
  • 同步执行：所有操作在浏览器下一次绘制前完成