关于javascript:React源码学习Part5commit阶段

commit 阶段的次要工作

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

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

  // react-reconciler/src/ReactFiberWorkLoop.old.js
  commitRoot(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 指针替换图示