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

  • React生命周期和响应式原理(Fiber架构)已关闭评论
  • 146 次浏览
  • A+
所属分类:Web前端
摘要

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

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

生命周期

  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)指针