共计 1754 个字符，预计需要花费 5 分钟才能阅读完成。
概述
- React 创立的应用程序分两局部，一部分是首次创立的 Mount 阶段，另一部分是常见的更新更新和事件触发阶段 Update 阶段。
- 对于 DOM 更新是两套流程，首次创立和 DOM 更新。
- 简述 React 中 Class 组件生命周期的运行工夫点和 HOOK 组件中 UseEffect、UseLayout 的运行工夫点
Render 阶段
- Render 阶段又分 beginWork 阶段和 complete 阶段
- Render 阶段次要的目标是为每一个 HTML 节点生成 Fibre 节点，须要执行的事件也会挂载到 Fibre 节点上，并依据页面构造生成 Fibre 链表
-
Render 阶段生成 Fibre 链表完结后，交给 commit 阶段。commit 阶段会在此基础上执行事件、渲染或更新 DOM，最初绘制到页面上。
beginWork 阶段——创立 Fibre 节点
- 在这个阶段会更依据页面的 HTML 构造和 HTML 元素生成创立对应的 Fibre 对象，记录节点的相干信息。如节点类型、节点上的属性、父级对象 …
- 在产生页面更新时，React 会为每个元素从新构建一个新的 Fibre 对象。会在此阶段尝试复用上次的 Fibre 对象，如果没有产生扭转就间接复制过去。
-
会在此阶段调用shouldComponentUpdate 生命周期函数，若调用该函数，则 react 页面在视觉上不会产生更新，但 ref 的援用还是会产生更新。
complete 阶段——创立虚构 DOM
- beginWork 生成 Fibre 对象后，在 Complete 办法中生成虚构 DOM。如果该 Fibre 节点有父级对象，则会将创立的虚构 DOM 挂载到父级 Fibre 的属性中
-
当执行到最初一个节点时，会失去一个虚构 DOM 树，而后进入 Commit 阶段。
Fibre 对象和虚构 DOM 的构建
Commit 阶段
- React 相干生命周期
- 解决 Render 阶段的 Fibre 链表，执行事件或更新 DOM。
-
commit 阶段分 3 局部，beforeMuation、Mutation、Layout。
beforeMutaion 阶段
- 解决 focus 事件
- 对于 Class 组件而言，解决 getDerivedStateFromProps 生命周期函数，能够管制本次更新过程中，页面能不能产生扭转。
- 对于 HOOK 而言，会将 useEffect 中的回调函数退出一个队列，会在整个 Commit 阶段实现当前再异步执行，而在本阶段并不会间接执行。
- 调用 Class 组件的getSnapshotBeforeUpdate 生命周期函数
Mutation 阶段
- Mutation 阶段会遍历蕴含 useEffecTarget 属性 t 的 Fibre 链表，有须要文本更新的就更新，有须要更新 ref 的就更新 ref。
- 对 DOM 节点进行增删改查的操作。处理结果会反馈到 Fibre 节点中（如新增 fibre 节点，删除 fiebr 节点），这个 Fibre 节点并不一定是以后 Fibre 节点，也可能是以后 Fibre 节点的父级。
- 对于以后 Fibre 节点产生更新的状况 ，若是 HOOK 组件，会调用 useLayoutEffect 的销毁函数；对于 Class 组件而言，会 调用 componentDidWillUnMount 生命周期函 数。如果以后 Fibre 节点类型不是 HOOK 或 Class 类型，如 div 类型、span 类型 … 就不会执行销毁函数的回调。（PS：更新后的后果必须保障上一次的销毁函数调用）
- Mutation 阶段的 current 指针还是之前的，所以执行销毁函数的回调没有问题。
layout 阶段
- layout 阶段会替换 current 指针，这就是双缓存机制产生变更的工夫点。
- layout 阶段会依据 current 指针是否有值，执行不同的生命周期函数。没有值，执行 Class 组件的 componentDidMount 生命周期；有值就执行 componentDidUpdate 生命周期函数。
- 对于 HOOK 而言，会调用 useEffect 的回调函数，将销毁函数退出到队列中。本阶段的最初会查看这个队列，如果有的话会执行队列工作，直到清空后才算实现 layout 阶段。
- this.setState()的回掉函数，也就是第二个参数，也是在这个阶段执行。
- 会执行 useLayoutEffect 的回调函数，并将新的销毁函数增加到一个队列中。再次更新时，Mutation 阶段就会执行 UseLayout 的销毁函数。
正文完