react-fiber怎么做到中断恢复的的
在上文我们得出结论,“渲染” 过程如果要中断,只能选择在 Reconcile 阶段,因为这个阶段只涉及 Fiber 的变更,而没有产生实际 DOM 的变更。
eginWork
处理每个 Fiber 上更新,将结果同步在 **Fiber** 的 memoizedProps 、memoziedState 上,并使用 Flags 来标记每个节点需要进行何种处理。
这个阶段是从顶到下地遍历 **Fiber** 结构,先处理自身,然后子节点 **child**,没有子节点处理兄弟节点 **sibling** 。
completeUnitOfWork
将每个 **Fiber** 的全部子节点的 **flags** 和 **subtreeFlags** 都标记在自己的 **subtreeFlags** 上。
这个阶段是从下至上进行回溯的,因为要读取子节点标记的原因,需要保证子节点先处理完成。
如上图可见 **Reconcile** 的整体流程,在每处理完成一个 Fiber 节点时,会检查时间片是否到时,如果到了,则会中断此次 “渲染” 。
等到下一次进来的时候,可以直接从 **workInProgress** 上次中断的 Fiber 节点开始处理即可