React 生命周期函数详解

目录

1. 概念
2. componentWillMount
3. componentDidMount
4. shouldComponentUpdate
5. componentWillUpdate
6. componentDidUpdate
7. componentWillReceiveProps
8. componentWillUnmount

---

概念

生命周期函数:指在某一个时刻组件会自动调用执行的函数 //在组件即将被挂载到页面的时刻自动执行

componentWillMount

  //在组件即将被挂载到页面的时刻自动执行
  componentWillMount(){
    console.log('componentWillMount')
  }

componentDidMount

  //在组件被挂载到页面之后自动执行
  componentDidMount(){
      console.log('componentDidMount')
  }

shouldComponentUpdate

  //组件被更新之前会自动执行
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    //true会继续false暂停
    return true;
  }

componentWillUpdate

  //shouldComponentUpdate 执行完 componentWillUpdate 才执行
  componentWillUpdate(){
    console.log(' componentWillUpdate')
  }

componentDidUpdate

  //组件更新完成之后会被执行
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }

componentWillReceiveProps

  //当一个组件从父组件接收参数且组件之前已经存在于父组件时执行
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps')
  }

@[toc] componentWillUnmount 

 //当这个组件即将被从页面剔除才会被执行
  componentWillUnmount(){
    console.log('componentWillUnmount')
  }