React 18 源代码学习 12 commit

2022-09-13  本文已影响0人  吴摩西

预备 comimt

当所有的 completeUnitOfWork 结束后,整个 render 过程就结束了。整个完成的 fiber tree 存储在 root.finishedWorkroot.current.alternate 中。render 过程会返回相应的状态,正常返回的值是 RootCompleted(5)

render 结束后,在 performConcurrentWorkOnRoot 中进入 finishConcurrentRender,从而进入 commitRoot,而进入 commit 阶段。

  1. flushPassiveEffects
    flushPassiveEffects 进行循环,防止 flushPassiveEffects 里再产生 passive effect,首次渲染时,本例中没有 passive effect,这里是空的。
  2. markCommitStarted
    本例中,这个阶段是空的
  3. 清空 root.finishedWork,调用 markRootFinished,清空 root 里面的 lanes 相关的信息
  4. root.flags 中包含了 Snapshot(512),进入主要的 commit 阶段,

commit

看注释可知,commit 阶段分为多个子阶段。每个子阶段,都会有一个 effect list。首先进入的是 before mutation 阶段。在此阶段中,在修改 fiber tree 之前,读取当前树,在此阶段,getSnapshotBeforeUpdate 会被调用。

主要入口: commitBeforeMutationEffects

上一篇下一篇

猜你喜欢

热点阅读