React 18 源代码学习 12 commit
2022-09-13 本文已影响0人
吴摩西
预备 comimt
当所有的 completeUnitOfWork
结束后,整个 render 过程就结束了。整个完成的 fiber tree 存储在 root.finishedWork
和 root.current.alternate
中。render 过程会返回相应的状态,正常返回的值是 RootCompleted(5)
。
render 结束后,在 performConcurrentWorkOnRoot
中进入 finishConcurrentRender
,从而进入 commitRoot
,而进入 commit 阶段。
-
flushPassiveEffects
对flushPassiveEffects
进行循环,防止flushPassiveEffects
里再产生passive effect
,首次渲染时,本例中没有passive effect
,这里是空的。 -
markCommitStarted
本例中,这个阶段是空的 - 清空
root.finishedWork
,调用markRootFinished
,清空root
里面的 lanes 相关的信息 -
root.flags
中包含了Snapshot(512)
,进入主要的 commit 阶段,
commit
看注释可知,commit 阶段分为多个子阶段。每个子阶段,都会有一个 effect list。首先进入的是 before mutation
阶段。在此阶段中,在修改 fiber tree 之前,读取当前树,在此阶段,getSnapshotBeforeUpdate
会被调用。
主要入口: commitBeforeMutationEffects