React生命周期和响应式原理(Fiber架构)

注意：只有类组件才有生命周期钩子函数，函数组件没有生命周期钩子函数。

生命周期

1. 装载阶段：constructor()　　render()　　componentDidMount()
2. 更新阶段：render()　　componentDidupDate()
3. 卸载阶段：componentWillUnmount()

(面试题)shouldComponentUpdate()

• 返回true时，正常进入更新阶段，返回false时，不进入更新阶段。
• this.$forceUpdate()这个方法调用，会绕过shouldComponentUpdate(),一定会 进入更新阶段。
• shouldComponentUpdate()一般用于性能调优，阻塞掉哪些不参与视图渲染的变量更新导致的(Fiber)生成。
• shouldComponentUpdate()只有在类组件Component中才有用，在PureComponent中没用。

React组件的渲染(更新)流程

由两个阶段构成，一个是render阶段，一个是commit阶段。

render阶段： 目标是生成Fiber树，这个过程是异步的，可以中断的，并且不执行任何副作用。

commit阶段：目标是把协调运算的结果，一次性提交渲染(更新)成真实DOM，这个过程在React(v17)是不可中断的，在React(v18)中可以人为的中断（由startTransitansition进行中断）

React响应式原理(Fiber架构)

什么是Fiber单元

每一个JSX元素节点都是一个Fiber单元（React.creatElement()的返回值）

为什么React要构建复杂的Fiber树

为了让协调运算，commit阶段可以循环执行，而不是递归

怎么执行协调运算

没个Fiber单元上都有一个alternater指针，指向旧Fiber中的自己。如果新的Fiber树存在，但旧的Fiber树不存在，说明新增节点；如果新的Fiber树不存在，但旧的Fiber树存在，说明这个节点是要删除的节点；如果新旧Fiber树都存在这个节点，进一步遍历新旧节点的属性，对比新旧节点的变化。

这些独立的Fiber单元是怎么串联成Fiber树

给每个Fiber单元添加(child，sibling，parent)指针