reactJS -- 8 组件生命周期

https://fraserxu.me/2014/08/31/react-component-lifecycle/

React入门教程 - 组件生命周期

每个阵营组件在加载时都有特定的生命周期，在此期间不一样的方法会被执行。

组件加载：componentWillMount

componentWillMount()

componentWillMount在会组件render以前执行，而且永远都只执行一次。

因为这个方法始终只执行一次，若是因此这里在定义了setState方法以后，页面永远都只会在加载前更新一次。

组件加载：componentDidMount

componentDidMount()

这个方法会在组件加载完毕以后当即执行。在这个时候以后组件已经生成了对应的DOM结构，经过能够this.getDOMNode()来进行访问。

若是你想和其余的JavaScript框架一块儿使用，能够在这个方法中执行setTimeout，setInterval或者发送AJAX请求等操做（防止异部操做阻塞UI）。

componentDidMount: function() {
  setTimeout(function() {
    this.setState({items: {name: 'test'}})
  }, 1000)
}

组件更新：componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到一个新的道具时被执行。这个方法在初始化渲染时不会被调用。

经过使用this.setState（）更新状态调用render（）以前，将此做为对prop转换的反应的机会。（不太懂这句话...）

旧的道具经过能够this.props来电子杂志。这个在函数内调用this.setState()方法不会增长一次新的渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

组件更新：shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

返回一个布尔值。在组件接收到新的道具或者状态时被执行。初始化在时或者使用forceUpdate时不被执行。

能够在你确认不须要更新组件时使用。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

若是shouldComponentUpdate返回false，render()则会在下一个状态改变以前被彻底跳过（另外componentWillUpdate和componentDidUpdate也不会被执行）

状况默认下shouldComponentUpdate会报道查看真实的。

默认状况下，shouldComponentUpdate老是返回true，以防止在状态变为现实时的细微错误，可是若是您注意老是将状态视为不可变的，而且只能从render（）中的道具和状态中读取，那么可使用一个实现来覆盖shouldComponentUpdate比较旧的道具和状态与他们的替代品（这句也不太懂...）

若是你须要考虑性能，特别是在有上百个组件时，使用能够shouldComponentUpdate来提高应用速度。

组件更新：componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在组件接收到新的道具或者状态但尚未渲染时被执行。在初始化时不会被执行。

通常用在组件发生更新以前。

组件更新：componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件完成更新后当即执行。在初始化时不会被执行。通常会在组件完成更新后被使用。例如清除通知文字等操做。

卸载：componentWillUnmount

在组件从DOM卸载后当即执行。

componentDidMount:function(){
    this.inc = setInterval(this.update,500)
},
componentWillUnmount:function(){
    console.log("goodbye cruel world!")
    clearInterval(this.inc)
}

主要用来执行一些必要的清理任务。清除例如setTimeout等函数，任意或者在的componentDidMount建立³³的DOM元素。