标签：shouldComponentUpdate 生命周期 render React Fiber 阶段 节点
注意：只有类组件才有生命周期钩子函数，函数组件没有生命周期钩子函数。
生命周期
- 装载阶段：constructor() render() componentDidMount()
- 更新阶段：render() componentDidupDate()
- 卸载阶段：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)指针
标签：shouldComponentUpdate,生命周期,render,React,Fiber,阶段,节点 来源： https://www.cnblogs.com/wang622/p/16582909.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。