Notes

时间切片是如何实现的

一句话结论:时间切片把 render 拆成许多“可中断的小单元”,在单元之间检查 shouldYield();这样不会改变最终 UI 结果,但能显著改善主线程的响应性。

1. “切片”的对象是谁

  • Fiber 节点就是天然的工作单元:每处理一个 Fiber,都是一次可暂停的边界
  • React 通过 workLoop 按深度优先遍历,逐个执行 beginWork/completeWork

2. “切片”的时机在哪

  • 并发 workLoop 会在单元边界检查 shouldYield()
  • 若该让出:保存当前进度(workInProgress),下次从这里继续

3. 你必须强调的边界

  • render 可中断;commit 不可中断
  • UI 不会展示“半渲染的中间态”,因为中间态不提交到 DOM

关联阅读

cd ..