react生命钩子的执行顺序

React的生命周期钩子跟Vue有些相似

初始化阶段
Vue: beforeCreate、created、beforeMount、mounted
React：constructor、componentWillMount【旧】、render、componentDidMount

运行阶段：【可能会执行多次】
Vue：beforeUpdate、updated
React:
state变化：shouldComponentUpdate、componentWillUpdate【旧】、render、componentDidUpdate
props变化：componentWillReceiveProps【旧】、shouldComponentUpdate、componentWillUpdate【旧】、render、componentDidUpdate

卸载阶段：
Vue：beforeDestory destoryed
React：componentWillUnmount

以上带【旧】的都是即将废除的钩子

父组件传给子组件中的数据发生改变

子组件内部渲染数据发生改变,生命钩子的执行顺序

页面有dom销毁,生命钩子执行顺序

父组件

import React,{Component} from "react";

// 导入子组件
import Old from '../life/Old'

class Index extends Component{
  state={
    age:18,
    isShow:true
  }
  render(){
    return 

      
      {this.setState({age:this.state.age+1})}}>点我改变
      {this.setState({isShow:false})}}>点我隐藏div
      
      {this.state.isShow && }
    
  }
}
export default Index

子组件

import React ,{Component} from "react";


export default class Old extends Component{
  constructor(props){
    super()
    console.log('----constructor---');
    this.state={
      name:'xi'
    }
  }
  componentWillMount(){
    console.log('---componentWillMount----');
    
  }
  render(){
    console.log('-----render----');
    
    return 

      这是一个寂寞的天
      
{this.props.age}
      {this.setState({name:'小可爱'})}}>点击改name
      
name:{this.state.name}
    
  }
  
  componentDidMount(){
    console.log('---componentDidMount---');    
  }
  
  componentWillReceiveProps(nextProps){
    console.log('----componentWillReceiveProps---');
    console.log(nextProps);    
  }
  
    shouldComponentUpdate(){
    console.log('---shouldComponentUpdate----');
    return true  //为false将不改变视图层,后面的钩子都不执行
  }
  
    componentWillUpdate(){
    console.log('+---componentWillUpdate--');
    
  }
  componentDidUpdate(){
    console.log('---componentDidUpdate---');
    
  }
  componentWillUnmount(){
    console.log('----componentWillUnmount----');
    
  }
}