前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber怎么做到中断恢复的的

react-fiber怎么做到中断恢复的的

 在上文我们得出结论，“渲染” 过程如果要中断，只能选择在 Reconcile 阶段，因为这个阶段只涉及 Fiber 的变更，而没有产生实际 DOM 的变更。

eginWork

处理每个 Fiber 上更新，将结果同步在 **Fiber** 的 memoizedProps 、memoziedState 上，并使用 Flags 来标记每个节点需要进行何种处理。

这个阶段是从顶到下地遍历 **Fiber** 结构，先处理自身，然后子节点 **child**，没有子节点处理兄弟节点 **sibling** 。

completeUnitOfWork

将每个 **Fiber** 的全部子节点的 **flags** 和 **subtreeFlags** 都标记在自己的 **subtreeFlags** 上。

这个阶段是从下至上进行回溯的，因为要读取子节点标记的原因，需要保证子节点先处理完成。

如上图可见 **Reconcile** 的整体流程，在每处理完成一个 Fiber 节点时，会检查时间片是否到时，如果到了，则会中断此次 “渲染” 。

等到下一次进来的时候，可以直接从 **workInProgress** 上次中断的 Fiber 节点开始处理即可

原文链接：https://blog.csdn.net/web22050702/article/details/124713389