组建的生命周期

在组件的整个生命周期中，随着该组件的props或者state的改变，相应的DOM也会随着改变。一个组件就是一个状态机：对于特定的输入，他总会返回一致的输出。

React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期以及销毁时。

生命周期的方法

React的组件拥有简洁的生命周期API，它仅仅提供你所需要的方法，而不会去追求全面。

实例化

一个实例初次被创建时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同。当你首次使用一个组件类时，你会看到下面的方法依次被调用：
constructor
componentWillMount
render
componentDidMount

下面举个简单的例子来证明：

class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1>哈哈</h1>
      </div>
    )
  }
}

我们可以在控制台中看到输出的结果，React先后输出了constructor，componentWillMount，render，componentDidMount。

图片.png

存在期

随着应用状态的改变，以及组件逐渐受到影响，下面的方法将依次被调用：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

销毁&清理期

最后，当该组件被使用完成后，componentWillUnmount方法将会被调用，目的是给这个实例提供清理自身的机会。

constructor

构造器准许设置实例的属性以及组件的状态。一个典型的构造器就像下面这样：

class Constructor extends Component {
    constructor() {
        super();    //调用父组件的构造器，必需项
        this.state = {x:'y'}
    }

    render()
    {...}
}

componentWillMount

该方法会在完成首次渲染之前被调用。这也是在render方法调用之前可以修改组件state的最后一次机会。它的存在仅仅是为了体现生命周期的完整性；是createClass的遗留物，现在已经被constructor替代了。

render

在这里会创建一个虚拟的DOM，用来表示组件的输出。对于一个组件来说，render，并且有特定的规则。render方法需要满足下面几点：

1、只能通过this.props和this.state访问数据。

2、可以返回null、false或者任何React组件。

3、只能出现一个顶级组件（不能返回一组元素），也就是返回的元素必须要用一个<div>标签给包裹起来。

4、必须纯净，也就是不能改变组件的状态或者修改DOM的输出。

render方法返回的结果并不是真正的DOM，而是一个虚拟的表现，React随后会和真实的DOM去对比，从而判断是否进行修改。

componentDidMount

在render方法成功调用并且真实的DOM已经被渲染之后，可以在componentDidMount内部通过ReactDOM.findDOMNode(this)方法或者使用ref来访问。

存在期

componentWillReceiveProps

在任意时刻，组件的props都可以通过父辈组件来更改。出现这种情况时，componentWillReceiveProps方法会被调用，你也将获得更改props对象及更新state的机会。

shouldComponentUpdate

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

componentWillUpdate

和componentWillMount方法类似，组件会在接收到新的props或者state进行渲染之前调用该方法。

componentDidUpdate

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

销毁&清理期

componentWillUnmount

最后，随着一个组件从它的层级结构中移除，这个组件的生命也走到了尽头。该方法会在组件被移除前调用，让我们有机会做一些清理工作。