React组件更新时经历的5个生命周期及其执行顺序

1. getDerivedStateFromProps（props,state）{}

2.shouldComponentUpdate(){}

判断组件要不要更新，在这个周期做优化，减少一些组件不必要的更新

3. render()

4.getSnapshotBeforeUpdate(prevpProps,preState){}

在最近一次渲染输出之前调用，他使得组件能在发生更改之前从DOM中捕获一些信息，此生命周期的任何返回值将作为参数传递给componentDidUpdate()，用在处理滚动位置的聊天线程等中

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

组件已经更新完成

import React, {
    Component } from 'react';
//组件更新时经历5个生命周期
class App extends Component {
   
    //1.组件更新，进入的第一个生命周期函数，
  static  getDerivedStateFromProps(props,state){
   
            console.log('1.执行了getDerivedStateFromProps')
            return true   //这里必须返回一个对象出去，不然会报错
    }
    state={
   
        msg:'🐖'
    }
    // 2.判断组件要不要更新，在这个周期做优化，减少一些组件不必要的更新
    shouldComponentUpdate(){
   
        console.log('2.执行了shouldComponentUpdate')
        return true     //为true时允许state改变状态
        // return false     //为true时不允许state改变状态

    }
    render()