注意:只有类组件才有生命周期钩子函数,函数组件没有生命周期钩子函数。
生命周期
- 装载阶段: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,阶段,节点 From: https://www.cnblogs.com/wang622/p/16582909.html