浅谈react新旧生命周期钩子

shouldComponentUpdate(){
  return false;
}

import React, { Component } from 'react'

export default class A extends Component {
  state={
    car:'奥迪'
  }
  changeCar= () => {
    this.setState({
      car:'奔驰'
    })
  }
  render() {
    return (
      <div>
        <div>我是组件A</div>
        <button onClick={this.changeCar}>换车</button>
        <B car={this.state.car}/>
      </div>
    )
  }
}

class B extends Component {
  //首次渲染不会被触发
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps')
  }
  render() {
    return (
      <div>
        我是组件B,我接收到的车是：{this.props.car}
      </div>
    )
  }
}

1.
state ={name:'佛系努力中……'}
//注意点1：需声明为类的静态方法《static》
static getDerivedStateFormProps(props,state){
  //可以读取到props,state
  //注意点2：必须return一个state对象或者null
  return {name:'哈哈哈'} 
  //或者null
}

2.
state ={name:'佛系努力中……'}
static getDerivedStateFormProps(props,state){
  return null
}

3.此方法使用于state的值在任何时候取决于porps
state ={name:'佛系努力中……'}
static getDerivedStateFormProps((props,state){
  return props
}

//在更新之前获得一个快照
getSnapshotBeforeUpdate(prevProps,prevState){
    console.log("getSnapshotBeforeUpdate--",prevProps,prevState)
    return '一只小猫'
}

//组件以及更新完毕，接收三个值，最后一个snapShot，即为getSnapshotBeforeUpdate返回值
componentDidUpdate(prevProps,prevState,snapShot){
    console.log("componentDidUpdate--",prevProps,prevState,snapShot)
 }