React的生命周期函数

说起生命周期函数，我又想吐槽了，又想夸vue了，算了算了

生命周期就是组件从实例化到渲染到最终从页面中销毁

3个状态
Mounting:将组件插入到DOM中
Updating:将数据更新到DOM中
Unmounting:将组件移除DOM中

先说一下这些生命周期函数的名字和作用，下面我再举例

ComponentWillUnmount:组件将要渲染,ajax，添加动画前的类
ComponentDidMount:组件渲染完毕,添加动画
ComponentWillReceiveProps:组件将要接受props数据,查看接收props数据
ShouldComponentUpdate:组件接收到新的state或者props，判断是否要更新。返回布尔值
ComponentWillUpdate:组件将要更新
ComponentDidUpdate:组件已经更新
ComponentWillUnmount:组件将要卸载

首先创建一个子类组件

class ComLife extends React.Component{
  constructor(props){
    super(props)
    this.state={
      msg:'hello'
    }
   console.log('constructor构造函数')
  }
  componentWillMount(){
    console.log('将要渲染')
  }
  componentDidMount(){
    console.log('渲染完毕')
  }
  componentWillReceiveProps(){
    console.log('将要接收新数据')
  }
  shouldComponentUpdate(){
    //如果希望更新，就返回为真，不希望更新就返回为false
    if(this.state.msg ==="你好"){
      console.log(this.state)
      return true
    }else{
      return false
    }
  }
  componentWillUpdate(){
    console.log('组件将要更新')
  }
  componentDidUpdate(){
    console.log('组件更新完毕')
  }
  componentWillUnmount(){
    console.log('组件将要卸载')
  }
  render(){
    console.log('render渲染函数')
    return(
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeMsg}>组件更新</button>
      </div>
    )
  }
  changeMsg=()=>{
    this.setState({
      msg:'你好'
    })
  }
}

再创建一个父类组件

class ParentCom extends Component{
  constructor(props){
    super(props)
    this.state={
      isShow:true
    }
  }
  render(){
    if(this.state.isShow){
      return (
        <div>
        <button onClick={this.remove}>移除</button>
        <ComLife></ComLife>
      </div>
      )
    }else{
      return <h1>内容移除</h1>
    }
  }
  remove=()=>{
    this.setState({
      isShow:false
    })
  }
}

一.当我们进入页面时候，执行顺序是

constructor构造函数
将要渲染
render渲染函数
渲染完毕

二.当我们更新组件时候，执行顺序是

渲染完毕
组件将要更新
render渲染函数
组件更新完毕

三.当我们移除组件时候，执行顺序是

组件将要卸载