美文网首页
React 18 源代码学习 12 commit

React 18 源代码学习 12 commit

作者: 吴摩西 | 来源:发表于2022-09-13 20:04 被阅读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

    相关文章

      网友评论

          本文标题:React 18 源代码学习 12 commit

          本文链接:https://www.haomeiwen.com/subject/zomhortx.html