7.React生命周期函数（1）19-04-29

*生命周期函数：是指在某一时刻，组件会自动调用执行的函数。

image.png

1.Initialization

Initialization指的是它的初始化过程，这是组件会初始化一些数据，比如说props、state

constructor(props){
    super(props);
    //当组件的state或者props发生改变的时候, render函数就会重新执行
    this.state = {
      inputValue:'',
      list:[],
    }}

constructor就是初始化的位置，这里会去定义state，接收props。

2.Mounting

Mounting指页面挂载，
在render执行之前执行：

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

在render执行之后执行：

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

componentWillMount和componentDidMount只有在页面第一次挂载的时候被执行。

3.Updation

在组件更新过程中，也会涉及一些新的生命周期函数。
1.无论props或者states发生变化，都会执行的共有的生命周期函数：

//组件被更新之前，它会自动被执行
    shouldComponentUpdate(nextProps, nextState, nextContext) {
       console.log('shouldComponentUpdate');
       //更改时是否更新组件 一般返回true
       return true;
    }

//组件更新之前它会自动执行，但是在shouldComponentUpdate之后执行
    //如果shouldComponentUpdate返回false,这个函数就不会被执行了
    componentWillUpdate(nextProps, nextState, nextContext) {
       console.log('componentWillUpdate');
    }

//组件更新完成之后，他会被执行,render执行后执行
    componentDidUpdate(nextProps, nextState, nextContext) {
       console.log('componentDidUpdate');
    }

componentWillReceiveProps什么时候执行：

//一个组件要从父组件接受参数
  //如果这个组件第一次存在于父组件中，不会执行
  //如果这个组件已经存在于父组件中，才会执行
  componentWillReceiveProps(nextProps, nextContext) {
    console.log('child componentWillReceiveProps');
  }

4.UnMounting

UnMounting把组件从页面去除的一个过程

//当组件即将被从页面剔除的时候，会被执行
  componentWillUnmount() {
    console.log('child componentWillUnmount');
  }

最后，每一个组件都会执行生命周期函数，不是只有父组件才会执行。

最后编辑于：2019.05.17 09:47:21