React基础——class组件新旧生命周期都在这了

jjjona0215
644 阅读3分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

本篇文章为学习笔记，主要讲React基础内容class写法的生命周期

一、什么是组件的生命周期

又称

  • 生命周期回调函数：函数是react调用的，我们没有触发
  • 生命周期钩子：react会在合适的时间，把函数钩出来

注意：只有类式组件有生命周期，函数式组件没有

二、旧版生命周期

1、生命周期详解

分为初始化、更新、销毁三种情况来梳理，其中更新又包括三种更新方式

  • 初始化——由React.render()触发，依次执行如下钩子
    • constructor，构造器
    • componentWillMount
    • render
    • componentDidMount
  • 更新，有以下三种情况
    • 更新路线1——-由setState触发，受阀门控制，依次执行如下钩子
      • shouldComponentUpdate，阀门
        • 默认返回true
        • 如果声明了这个生命周期那么需要显示的有一个返回值
        • 如果返回false，则不会更新，不会走下面的生命钩子
      • componentWillUpdate
      • render
      • componentDidUpdate
    • 更新路线2——-由forceUpdate()强制更新触发，不受阀门控制，依次执行如下钩子
      • componentWillUpdate
      • render
      • componentDidUpdate
    • 更新路线3——-由父组件重新render，props改变触发，依次执行如下钩子
      • componentWillReceiveProps，子组件内
        • 第一次不会调用，有新的props才会调用
        • 能接受参数，componentWillReceiveProps(props)
      • shouldComponentUpdate，阀门
      • componentWillUpdate
      • render
      • componentDidUpdate
  • 销毁——由React.unmountComponentAtNode()触发，执行如下钩子
    • componentWillUnmount

2、常用生命周期

  • render
    • 渲染DOM节点
  • componentDidMount
    • 发送网络请求
    • 订阅消息
    • 开启定时器
  • componentWillUnmount
    • 清除定时器
    • 取消订阅消息

示例：在componentDidMount钩子注册一个监听器，在componentWillUnmount卸载

class Life extends React.Component{
  state = {
    opacity: 1
  }
  
  death = () => {
    // 卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  }
  
  // 组件挂载页面之后调用
  componentDidMount() {
      this.timer = setInterval(() => {
      let {opacity} = this.state
      opacity -= 0.1
      if(opacity <= 0) opacity = 1
      this.setState({opacity})
    }, 200)
  }

   // 组件将要卸载
   componentWillUnmount() {
      // 清除定时器
      clearInterval(this.timer)
   }

   // 初始化渲染、状态更新之后
   render() {
       return(
           <div>
               <h2 style={{opacity: this.state.opacity}}>组件组件</h2>
               <button onClick={this.death}>卸载组件</button>
           </div>
       )
   }
}

ReactDOM.render(<Life>, document.getElementById('test'))

三、新版生命周期

1、新旧版生命周期的区别

先对比，新旧版本的生命周期，再具体分析新版的生命周期，新旧版本生命周期的区别主要为以下两个方面

（1）废弃或者说不推荐使用三个带Will生命钩子

  • componentWillMount
  • componentWillUpdate
  • componentWillReceiveProps 17版本被重命名为UNSAFE_name，如UNSAFE_componentWillMount，componentWillMount仍能使用，未来可能componentWillMount不能直接使用，只能使用UNSAFE_name

废弃的原因(截图来自官网)

（2）引入了两个新的生命周期钩子

  • static getDerivedStateFromProps
    • 含义：获取派生的state从props上
    • 是类方法，不在实例上，所以要写static
    • 需要有返回值：可以返回一个状态对象、或者null，返回的值即是state的值
    • 可以接受参数(props，state)
    • 使用场景罕见：state任何时候都等于props
static getDerivedStateFromProps(props, state) {
  return props
}
  • getSnapshotBeforeUpdate
    • 含义：在更新前获取快照
    • 调用时机：在最近一次渲染输出(提交到DOM节点)之前调用，在组件发生更改时，从DOM中捕获一些信息，比如滚动位置
    • 需要返回值：可以返回一个快照值（可以是任何值），或者null，该返回值将作为参数传递给componentDidUpdate
    • componentDidUpdate，可以接收三个参数，preProps、perState、snapshotValue
getSnapshotBeforeUpdate(){
	return xxx
}
componentDidUpdate(preProps, preState, snapshotValue){
	snapshotValue = xxx
}

2、新旧版生命周期

  • 初始化，没有了componentWillMount，多了getDerivedStatefromProps

    • constructor
    • getDerivedStatefromProps
    • render
    • componentDidMount

  • 更新，没有了componentWillReceiveProps和componentWillUpdate，多了getDerivedStateFromProps和getSnapshotBeforeUpdate，阀门还是一样的起作用

    • getDerivedStateFromProps
    • shouldComponentUpdate，阀门还是一样起作用
    • render
    • getSnapshotBeforeUpdate
    • componentDidUpdate

  • 卸载，与旧版一致

    • componentWillUnmount

本文收录专栏React，本专栏持续记录react学习笔记

avatar
文章
阅读
粉丝