commitRoot

  1. 全局变量 workInProgressRoot、workInProgress、workInProgressRootRenderLanes 设为 默认值

  2. 获取 workInProgress 上的 firstEffect（completeUnitOfWork 生成的）

    if (finishedWork.flags > PerformedWork) {  if (finishedWork.lastEffect !== null) {    finishedWork.lastEffect.nextEffect = finishedWork;    firstEffect = finishedWork.firstEffect;  } else {    firstEffect = finishedWork;  }}

commitBeforeMutationEffects

  1. before mutation: 对不同组件进行操作

    • class 组件: 获取 snapshot
    • 其余组件: 不解决

commitMutationEffects

  1. 将组件退出到实在的 dom 节点下 —— div#root.appendChild(child)
  2. HostComponent: commitUpdate 进行事件注册

commitLayoutEffects

性能

  1. ref 挂载: commitAttachRef: ref.current = current.stateNode

  2. commitLifeCycles

    1. 函数组件: commitHookEffectListMount —— 取出 finishedWork.updateQueue，执行外面的 hooks

    2. class 组件:

      • 执行生命周期办法, componentDidUpdate(props, state, snapshot)
      • commitUpdateQueue

代码

  1. commitUpdateQueue: 执行 updateQueue 中的办法

    function commitUpdateQueue(finishedWork, finishedQueue, instance) {  var effects = finishedQueue.effects;  finishedQueue.effects = null;  if (effects !== null) {    for (var i = 0; i < effects.length; i++) {      var effect = effects[i];      var callback = effect.callback;      if (callback !== null) {        effect.callback = null;        callCallback(callback, instance);      }    }  }}