React 生命周期详解, 让你三分钟掌握它

一. react 生命周期钩子函数 八个钩子函数

一.初始化( 挂载 )阶段:Mounting 只执行一次,自动执行

1. constructor:

作用:

• 通过super来完成继承,并将props赋值给this.props

• 完成初始化阶段( 赋值 …) ,state定义和初始化赋值,非箭头函数的this绑定

2. getDeriveStateFromProps:

作用:

• 这个钩子函数要求要有返回值,返回值是一个新的状态或是null
• 可以更新一次state

UNSAFE_componentWillMount:
在react 17 版本将会弃用
类似vue中的 beforeMount 和 created 结合
表示组件即将挂载( 将vdom渲染成真实dom ),为挂载做准备,内部事务( VDOM ),我们不干预

3. render:
   react中最核心的方法,必须有

作用:

• 通过React.creatElement将jsx结构渲染成 vdom 对象模型
• 可以进行this.props 和 this.state 的计算
• 可以返回 react元素( 用的最多的 ), string字符串, Fragment片段, 插槽( ReactDom ), 数组, Boolean或null( 不显示 )

4. componentDidMount:
   组件挂载结束了,类似于vue中的mounted

作用:

• 可以做数据请求,然后将数据结果给我们的state
• 这个阶段已经生成了真实dom, 所以可以做dom操作
• 可以做第三方类库的引入

二. 更新阶段:Updating 3+2

执行条件–props改变 setState forceUpdate

UNSAFE_componentWillReceiveProps( nextProps ){}

react 17版本将会弃用 UNSAFE 是为了向下兼容

表示组件的属性发生了改变后触发,它是用来接收新的属性 nextProps 参数表示修改后的新属性 this.props 表示原来的属性
this.props.name == nextProps.name 这个判断条件可以让我们知道组件的属性是否改变—> 应用 隐藏footer,改变title…

1. static getDerivedStateFromProps( netxtProps ){ } 横跨两个阶段

注意:

• 这个钩子函数中this的值为undefined
• 这个钩子函数还要求我们要有一个初始化的state
• 要求必须有返回值

作用:

• 可以返回一个新的state
• 如果props改变了,可以接收一个新的属性,如果没有改变,接收的就是旧属性

触发条件:

• 初始化执行一次,因为替代了componentWillMount
• props改变可以触发,因为替代了componentWillReceiveProps
• state改变也可以触发,因为替代了componentWillUpdate

2. shouldComponentUpdate( nextProps,nextState )

• 表示组件是否应该更新,是性能优化的方案
  eg: nextState.sum == this.state.sum ? false : true --> render 不会再次执行

• shouleComponentUpdate 必须要有返回值,返回值是布尔值

• 经验:

  可以通过两个参数和对应的this.props/this.state对比,来确定要不要继续
  对比: 通过React Filber 对比两次vdom

  • 深对比( 当前组件继承Component )
  • 浅对比( 当前组件继承PureComponent )

componentWillUpdate(){}

表示组件即将更新

注意:
1.不要在这里调用setState
2.不要在这里数据请求

3. render 计算属性和状态 渲染vdom

4. getSnapshotBeforeUpdate( prevProps,prevState ){}*

• 改变前的state和props
• 作用:
  • 这个钩子函数存在的意义就是通过返回值给 componentDidUpdate 传递一个数据
  • 项目中: 1.返回滚动条的位置…

5. componentDidUpdate( prevProps,prevState,snapshot ){}

• 表示组件更新结束,
• 真实dom渲染出来了,
• 可以操作dom了
• 第三方库实例化–动态数据实例化

更新阶段总结

​ 1.static getDerivedStateFromProps

• 更新状态
• 接收新属性
  2.shouldComponentUpdate
• 判断组件是否要渲染 继承Component深对比 继承PureComponent 浅对比
  3.render
• 计算this.props this.stated
• 渲染vdom
  4.getSnapshotBoforeUpdate
• 给componentDidUpdate 一个数据
  5.componentDidUpdate
• 获得了真实dom, 可以完成dom操作

三.卸载阶段:Unmounting

componentWillUnmount(){}
表示组件卸载时触发
作用:

• 善后,完成清理工作

四.错误处理阶段

做什么?

• 监听子组件错误,然后用降级UI来代替崩溃组件树

static getDerivedStateFromError

• 监听子组件错误,然后更新state

componentDidCatch