react 生命周期函数介绍

constructor()：构造函数

执行：组件加载钱最早调用一次，仅调用一次。

做用：定义状态机变量。

注意：第一个语句必须为super(), 不然会报错：'this' is not allowed before super()

constructor(props) {  
    super(props);  
    this.state = {  
      content:null,  
    }  
}

 componentWillMount()

执行：组件初始渲染(render()被调用前)前调用，仅调用一次。

做用：若是这个函数调用的setState改变了组件的某些状态，react会等待setState完成后再渲染组件。

注意：子组件也有componentWillMount函数，在父组件的该函数调用后再调用。

render()

执行：componentWillMount调用以后， componentDidMount调用以前。

做用：渲染挂载组件。

触发：一、初始化加载页面，二、状态机改变setState，3、接收新的props（父组件更新）

注意：组件必要函数，不能在函数内使用setState改变状态机。

componentDidMount()

时间：render以后被调用，仅调用一次。

做用：渲染挂载组件，能够使用refs(react支持的一个特殊属性，能够将它加在render函数返回的组件元素上，起一个标记做用，方便定位。)

注意：子组件也有该函数，在父组件调用前调用；若是该函数内有setState改变状态机，将会从新渲染组件，若是须要在页面初始化以后才改变状态机的，能够将网络请求放在该函数内。

componentWillReceiveProps(nextProps)

时间：组件渲染后，当组件接收新的nextProps时被调用。函数接收一个新的nextProps对象，nextProps是父组件传给子组件的。父组件render以后就会被调用。

做用：渲染挂载组件，能够使用refs(react支持的一个特殊属性，能够将它加在render函数返回的组件元素上，起一个标记做用，方便定位。)

注意：react初次渲染时不会被调用。

 shouldComponentUpdata(nextProps, nextState)

时间：组件执行render函数以后，接收新的props或state时被调用，即每次执行setState都会执行该函数，来判断是否从新渲染组件，默认返回true，接收两个参数。

做用：若是有些变化不须要执行渲染组件，可在该函数内阻止。

注意：不能在该函数内使用setState来改变状态机，如须要，请在componentWillReciveProps中改变。

componentDidUpdata()

时间：组件从新渲染后调用，在初始化渲染的时候该方法不会被调用。

做用：使用该方法能够在组件更新以后操做DOM元素。

componentWillUnmount()

时间：组件卸载以前调用。

做用：在该方法中执行必要的清理，好比无效的定时器后者在componentDidMount中建立的DOM元素。

注意

当一个页面中存在父子组件的时候，要特别注意componentDidMount的使用，由于子组件的componentDidMount会比父组件先调用，从而会引发父子组件传参错误。