commit阶段的次要工作

  • 将Render阶段构建的Fiber树、Effect链表(有副作用的Fiber)渲染成正式DOM
  • commit阶段分三个局部，beforeMutation、Mutation、layout这三个阶段
  • beforeMutation

  • 源码中commit阶段的入口函数：

    // react-reconciler/src/ReactFiberWorkLoop.old.jscommitRoot(root)函数

commitRoot(root)函数产生了什么

  • commitRoot(root)函数中最次要的执行内容是:
    commitRootImpl(root, previousUpdateLanePriority);

  • commitRootImpl函数中能够看到commit阶段三个局部的执行函数

    1. beforeMutation阶段：commitBeforeMutationEffects( root, finishedWork,);
    2. Mutation阶段：commitMutationEffects(root, finishedWork, lanes);
    3. layout阶段： commitLayoutEffects(finishedWork, root, lanes);
  • React双缓存机制，current指针替换，指向构建的workInProgress。
  • 对于Hook组件和class组件，在commit阶段中会依据组件不同的tag值执行不同的内容，class组件的生命周期也会相应的执行，如和beforeMutation阶段的会执行class组件的getSnapShotBeforeUpdate生命周期
  • current指针替换图示