React生命周期

从广义上面说：生命周期泛指自然界和人类社会中各种客观事物的阶段性变化及其规律。自然界的生命周期，可以分为出生、成长、成熟、衰退直至死亡。而不同体系下的生命周期又都可以从上述规律中演化出来，运用到软件开发的生命周期中，这二者看似相似，事实上又有所不同。生命体的周期是单一方向不可逆的过程，而软件开发的生命周期会根据方法的不同，在完成前从前开始。
React组件的生命周期根据广义定义描述，可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件需要更新的时候，我们会重新去渲染组件，直到卸载。
因此，我们可以把React生命周期分为两类：

• 当组件在挂载或卸载时
• 当组件接收新的数据时，即组件更新时

挂载或卸载过程

组件的挂载

组件挂载是最基本的过程，在这个过程中主要做组件状态的初始化，我们以下面的例子为模板写初始化组件：

import React, {Component,PropTypes} from 'react';

class App extends Component {
  static propTypes ={
    //设置属性的类型
  };
  static defaultProps ={
    //设置默认属性
  };
  constructor(props){
    super(props);
    this.state ={
      //设置默认状态
    }；
  }

  componentWillMount(){
  //...
  }
  componentDidMount(){
  //...
  }
  render(){
    return <div>This is demo.</div>
  }
}

我们看到上面propTypes和defaultProps分别代表props类型检查和默认类型。这两个属性被声明成静态属性，意味着从类外面也可以访问它们，我们可以这么访问：App.propTypes和App.defaultProps。
之后我们看到代码上有两个明显的生命周期方法，其中componentWillMount方法会在render方法之前执行，而componentDidMount方法中会在render方法之后执行，分别代表渲染前和渲染后。
这个初始化没有什么特别的，包括读取初始state和props以及两个组件生命周期方法componentWillMount和componentDidMount这些都只会在组件初始化时运行一次。
那么我们设想一下，我们在componentWillMount中执行setState方法，又会发生什么呢？组件会更新state，但组件只渲染一次。因此，这是无意义的执行，初始化时的state都可以放在this.state。
如果我们在componentDidMount中执行setState方法，又会发生什么呢？组件当然会再次更新，不过这样的话，在初始化的时候就渲染了两次组件，这样并不是一件好的事情，但是实际情况是，有一些情况下不得不需要setState，比如说在计算组件的文字或是宽高的时候，就不得不让组件先渲染，更新必要的信息后，再次进行渲染。

组件的卸载

组件的卸载是十分的简单的，只有componentWillUnmount这一个卸载前状态：

important React, {Copmponent,PropTypes} from 'react';

class App extends Component{
  componentWillUnmount(){
    //...
  }
  render(){
    return <div>This is demo.</div>
  }
}

在componentwillUnmount方法中，我们常常会执行一些清理方法，比如说事件回收或是清除定时器。

数据的更新过程

更新过程指的是父组件向下传递props或是组件自身执行setState方法时发生的一系列更新的动作。这里我们屏蔽了屏蔽了初始化的声明周期方法，以便观察更新过程的生命周期：

important React, {Copmponent,PropTypes} from 'react';

class App extends Component{
  componentWillReceiveProps(nextProps){
    //this.setState({})
  }

  shouldComponentUpdate(nextProps,nextState){
    // return true;
  }

  componentWillUpdate(nextProps,nextState){
    //...
  }

  componentDidUpdate(preProps,preState){
    //...
  }

  render(){
    return <div>This is demo.</div>
  }
}

如果组件自身的state更新了，那么会依次执行shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。
shouldComponentUpdate是一个特殊的方法，它接收需要跟新的props和state，让开发者增加必要的条件判断，让其在需要时更新，不需要太时不更新。因此，当方法返回false的时候，组件不再向下执行生命周期方法。
我们最后总结一下，现在我们总结一下声明周期函数及其触发时刻介绍如下：

• componentWillMount在渲染前调用
• componentDidMount在第一次渲染后调用
• componentWillReceiveProps在组件接受一个新的prop时调用，这个方法在第一次渲染的时候不会被调用。
• shouldComponentUpdate返回一个布尔值，在组件接受到新的props或是state时被调用。在初始化时或是使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接受到新的props或是state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用
• componentWillUnmount在组件从DOM中移除的时候立即被调用