时间切片是如何实现的
一句话结论:时间切片把 render 拆成许多“可中断的小单元”,在单元之间检查
shouldYield();这样不会改变最终 UI 结果,但能显著改善主线程的响应性。
1. “切片”的对象是谁
- Fiber 节点就是天然的工作单元:每处理一个 Fiber,都是一次可暂停的边界
- React 通过 workLoop 按深度优先遍历,逐个执行 beginWork/completeWork
2. “切片”的时机在哪
- 并发 workLoop 会在单元边界检查
shouldYield() - 若该让出:保存当前进度(workInProgress),下次从这里继续
3. 你必须强调的边界
- render 可中断;commit 不可中断
- UI 不会展示“半渲染的中间态”,因为中间态不提交到 DOM