Notes

时间分片是如何实现的(任务拆分/中断/恢复)

结论:React 把 render 拆成以 Fiber 为单位的工作单元;workLoop 在单元边界检查 shouldYield() 决定中断,保存 workInProgress 后下次从断点继续,必要时还会因为高优先级插队而放弃重做。

1. 如何拆分

  • 拆分粒度:Fiber 节点(beginWork/completeWork 组成一个单元)
  • 遍历方式:深度优先,用 workInProgress 指针推进

2. 如何中断

  • shouldYield() 判断时间片是否耗尽
  • 耗尽则暂停 render,把控制权还给浏览器处理输入/绘制

3. 如何恢复/重做

  • 恢复:保留 workInProgress,下次继续遍历
  • 重做:高优先级 lanes 到来,可能丢弃低优先级 render 结果并重新 render

关联阅读

cd ..