时间分片是如何实现的(任务拆分/中断/恢复)
结论:React 把 render 拆成以 Fiber 为单位的工作单元;workLoop 在单元边界检查
shouldYield()决定中断,保存workInProgress后下次从断点继续,必要时还会因为高优先级插队而放弃重做。
1. 如何拆分
- 拆分粒度:Fiber 节点(beginWork/completeWork 组成一个单元)
- 遍历方式:深度优先,用
workInProgress指针推进
2. 如何中断
shouldYield()判断时间片是否耗尽- 耗尽则暂停 render,把控制权还给浏览器处理输入/绘制
3. 如何恢复/重做
- 恢复:保留
workInProgress,下次继续遍历 - 重做:高优先级 lanes 到来,可能丢弃低优先级 render 结果并重新 render