performWorkOnRoot 是 React 渲染工作流的总入口。从 FiberRoot 开始，完整执行一次渲染流程最终把更新渲染到真实 DOM。它是连接 调度层 ↔ 渲染层 的唯一桥梁。话说回来，

一、调用者与常见痛点

• performWorkOnRootViaSchedulerTask — Scheduler 任务入口：当你在浏览器中看到卡顿时往往是 Scheduler 的时间片耗尽导致的。
• flushSyncWorkAcrossRoots_impl — 微任务结束时批量同步刷新：如果你在调试中发现某些更新没有立即生效，很可能是因为这一步被跳过。
• 使用者痛点：
  • 难以理解为什么某些更新会被延迟？
  • 看不到“时间切片”如何决定何时让出主线程？
  • 不知道错误如何回滚到安全状态？

二、完整调用链

performWorkOnRoot
│ ├─ 断言：未在渲染中
│ ├─ shouldTimeSlice =
&&!includesExpiredLane) ||
checkIfRootIsPrerendering
→ shouldTimeSlice = false → 走 renderRootSync
→ shouldTimeSlice = true → 走 renderRootConcurrent
│ ├─ renderRootSync
│ ├─ renderRootConcurrent
│ ├─ exitStatus!怎么说呢，== RootInProgress
│ ├─ renderWasConcurrent=false → 一致性检查
│ ├─ exitStatus!== RootErrored → 错误恢复
│ ├─ exitStatus!== RootFatalErrored → 致命错误
│ └─ finishConcurrentRender
└─ ensureRootIsScheduled

三、代码解析 & 使用者痛点解答

步骤一、防止递归渲染

if )!== NoContext) {
throw new Error;}

设计思想： 防止在渲染/提交阶段 触发新的渲染。使用者痛点： 如果你在组件内部直接触发 setState 并导致无限循环。React 会抛出此错误，让你及时发现递归问题。

步骤二、本次渲染是否开启时间切片

const shouldTimeSlice =
(!forceSync &&
includesBlockingLane &&
includesExpiredLane) ||
checkIfRootIsPrerendering;

三个条件都满足才时间分片：

User Pain Point: "我不明白为什么有时候 UI 会突然卡顿或者延迟更新？" — React 在这里判断是否可以进行时间切片；如果不满足条件，便会同步完成所有更新，避免因频繁切换造成的帧率下降。

步骤三、启动 renderRoot 建立 Fiber 树

let exitStatus: RootExitStatus = shouldTimeSlice
renderRootConcurrent
: renderRootSync;说起来，let renderWasConcurrent = shouldTimeSlice;话说回来，

Synchronous vs Concurrent key differences:

User Pain Point: "我的组件似乎有时跑得很慢，我该怎么判断它是在同步还是并发模式下执行？" — 查看 console 或者使用 React DevTools Profiler，你会看到对应的 “work loop type”。上面表格给出了两种模式的主要区别。

do { if { // 中断渲染。让出主线程，并标记挂起 if { markRootSuspended;} break，// ← 等 Scheduler 下次安排 } else { // 渲染完成 // 一致性检查 const finishedWork = root.current.alternate;按理说，if ( renderWasConcurrent && isRenderConsistentWithExternalStores ) { exitStatus = renderRootSync;// 同步重试 renderWasConcurrent = false;continue，} …