React源码Part5——commit阶段(处理class组件生命周期)

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part2——渲染原理： https://segmentfault.com/a/11...
React源码Part3——Fiber架构：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Update阶段):https://segmentfault.com/a/11...
React源码Part6——Commit阶段(beforeMutation)：https://segmentfault.com/a/11...
React源码Part7——Commit(Mutation阶段)： https://segmentfault.com/a/11...
React源码Part8——Commit(Layout阶段)：https://segmentfault.com/a/11...
参考链接：React技术揭秘——https://react.iamkasong.com/p...

commit阶段与React生命周期的关系

commit阶段的主要工作

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

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

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

  

useEffect和useLayoutEffect的执行

• 相关链接：https://react.docschina.org/d...

关于useEffect

• useEffect是异步执行的

• flushPassiveEffects()：功能是调度Hook组件中useEffect函数

  1. 在beforeMutation阶段： 会调度useEffect中的回调函数(create)和销毁函数(destroy)，但不会执行，相当于是做准备工作
  2. mutation阶段： 不会对useEffect做任何操作
  3. layout阶段： 会注册useEffect中的create和destroy
  4. 在整个Commit阶段结束后，再执行注册的create和destroy函数

关于useLayoutEffect

• useLayoutEffect是同步执行的
• beforeMutation阶段： 不做任何操作
• mutation阶段：执行useLayoutEffect中的销毁函数(destroy)
• layout阶段：执行useLayoutEffect中的回调函数(create)
• 整个Commit阶段完成后：不做任何操作
  

commitRoot(root)函数发生了什么

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

• commitRootImpl函数中可以看到commit阶段三个部分的执行函数

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

---

• current指针替换图示