首页IT科技react的生命周期函数(React生命周期和响应式原理(Fiber架构))

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

时间2025-05-16 06:49:19分类IT科技浏览5228
导读:注意:只有类组件才有生命周期钩子函数,函数组件没有生命周期钩子函数。...

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

生命周期

装载阶段: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)指针

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
docker部署前后端分离项目(Docker利用Nginx部署前端项目) 热血江湖雄霸区交易群(热血江湖私服霸业江湖)