react中生命周期很重要，学习了很长时间，下图将react的生命周期展现的淋漓尽致：

下面是react的生命周期的一些总结：

一、许多方法在组件生命周期中某个确定的时间点执行。

挂载： componentWillMount

componentWillMount()

服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render() 将会感知到更新后的state，将会执行仅一次，尽管 state 改变了。

挂载： componentDidMount

componentDidMount()

在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。

如果想和其它JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX请求，可以在该方法中执行这些操作。

注意：

为了兼容 v0.9，DOM节点作为最后一个参数传入。你依然可以通过this.getDOMNode() 获取 DOM 节点。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到新的props 的时候调用。在初始化渲染的时候，该方法不会调用。

用此函数可以作为react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

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

注意：

对于state，没有相似的方法： componentWillReceiveState。将要传进来的 prop 可能会引起 state 改变，反之则不然。如果需要在state 改变的时候执行一些操作，请使用 componentWillUpdate。

更新： shouldComponentUpdate

booleanshouldComponentUpdate(object nextProps, object nextState)

在接收到新的props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。

如果确定新的props 和 state 不会导致组件更新，则此处应该 返回 false。

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

如果 shouldComponentUpdate 返回false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）

默认情况下，shouldComponentUpdate 总会返回true，在 state 改变的时候避免细微的bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和state 的比对逻辑。

如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate可以提升应用的性能。

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在接收到新的props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

使用该方法做一些更新之前的准备工作。

注意：

你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件的更新已经同步到DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

使用该方法可以在组件更新之后操作DOM 元素。

注意：

为了兼容 v0.9，DOM节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。

移除： componentWillUnmount

componentWillUnmount()

在组件从DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

二、react生命周期流程

1.初始化，首次render

constructor():可以初始化state，绑定this

componentWillMount()

· componentWillMount只在初始化时候被调用一次，可以使用setState方法，会立即更新state，然后接着进行render。

· 

render()

· 注意在render中千万不可使用setState方法，不然马上会引起无限的报错了哈哈。如果其中包含其他的子组件，那么子组件的生命周期才开始进行。

· 

componentDidmount()

· 

在子组件也都加载完毕后执行，在RN中就是指组件初始化加载完毕，在react中DOM渲染完成，此时就可以操作DOM了。

· 

2.props发生改变时候更新

componentWillReceiveProps(nextProps)

componentWillReceiveProps方法可以比较this.props和nextProps来看是否发生了变化，然后可以进行setState等操作。

注意只要父组件此方法触发，那么子组件也会触发，也就是说父组件更新，子组件也会跟着更新。

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 方法在接收了新的props或state后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。

componentWillUpdate(nextProps, nextState)

componentWillUpdate在props或state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

render()

重新渲染。

componentDidupdate(prevProps, prevState)

会等子组件也都更新完后才触发。

3.state发生改变时候更新

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 方法在setState后state发生改变后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。

componentWillUpdate(nextProps, nextState)

componentWillUpdate在state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

render()

重新渲染。

componentDidupdate(prevProps, prevState)

会等子组件也都更新完后才触发。

3.组件销毁

componentWillUnmount()

组件销毁时候触发。