一、基础
先来介绍一个生命周期的定义：
1）componentWillMount(){}
// Mounting 安装阶段 // 在客户端和服务器上，在初始渲染发生之前立即调用一次 如果在这个方法中调用setState， // render（）将看到更新的状态，并且只会执行一次，尽管状态改变。
2)componentDidMount(){}
// Mounting 安装阶段 // 调用一次，只在客户端（不在服务器上），在初始渲染发生后立即 // 子组件的componentDidMount（）方法在父组件的componentDidMount（）方法之前被调用 // setTimeout setInterval AJAX 在此之行，强烈建议
3)componentWillReceiveProps(nextProps){}
// Updating 更新阶段 // 在组件接收新props时调用。初始渲染不调用此方法。 // 老的props可以用this.props 新值就用nextProps查看 // 在此函数中调用this.setState（）不会触发附加的渲染。
4)shouldComponentUpdate(nextProps,nextState){}
// Updating 更新阶段 // 当正在接收新的道具或状态时，在渲染之前调用。 // 此方法必须返回false or true 否则报错 true则渲染，false则不渲染！在此声明周期中可以考虑是否需要进行渲染！避免不必要的性能浪费 // 如果shouldComponentUpdate返回false，那么render（）将被完全跳过，直到下一个状态改变。此外，不会调用componentWillUpdate和componentDidUpdate。 // 默认返回true // 如果性能是一个瓶颈，特别是有几十个或几百个组件，请使用shouldComponentUpdate来加快您的应用程序。 // return true or false
5) componentWillUpdate(nextProps,nextState){}
// Updating 更新阶段 // 当正在接收新的props或state时立即调用。初始渲染不调用此方法 // 您不能在此方法中使用this.setState（）。如果您需要更新state以响应prop更改，请改用componentWillReceiveProps。
6)componentDidUpdate(nextProps,nextState){}
// Updating 更新阶段 // 在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。 // 当组件已更新时，使用此操作作为DOM操作的机会
7)componentWillUnmount(){}
// Unmounting 卸载阶段 // 在组件从DOM卸载之前立即调用。 // 在此方法中执行任何必要的清理，例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy
二、生命周期的执行顺序
举例：只有一个组件，里面有一个onClick事件改编一个state
刷新页面：
a、componentWillMount---> // 可以更改state
render()---->
componentDidMount // 周期结束
触发onClick事件：(前提只有事件中出发setState，其他中没有)
shouldComponentUpdate中 return true
shouldComponentUpdate-->
componentWillUpdate-->
render()-->
componentDidUpdate //周期结束
shouldComponentUpdate中 return false
shouldComponentUpdate //周期结束
上面只是一个很简单的例子讲述了周期的执行顺序，大家可以根据顺序去做相应的操作，当然在componentWillUpdate和componentDidUpdate这两个周期中不可以使用this.setState,需要使用此方法可以在componentWillReceiveProps中去操作。周期中可能进行的操作在上面的定义中以解释。
举例：父、子组件，父组件和上述相同，字段件只是一个纯ui组件没有任何的操作,接受父组件传来的props(父组件的click可控制props的内容)。
刷新页面：
父componentWillMount--->父render()---->子componentWillMount--->子render()--->子componentDidMount--->父componentDidMount
触发onClick事件:
子组件shouldComponentUpdate 返回的是false
父shouldComponentUpdate-->父componentWillUpdate-->父render()-->父componentDidUpdate
子组件shouldComponentUpdate 返回的是true
父shouldComponentUpdate-->父componentWillUpdate-->父render()--->子componentWillReceiveProps--->子shouldComponentUpdate--->子componentWillUpdate---->子render()--->子componentDidUpdate--->父componentDidUpdate
componentWillUnmount阶段
当你的组件关闭的时候，例如@R_59_404@面的时候，此周期执行一次。可能做的操作在上面的定义。
给出一段代码：(就是上述的子组件)
import React,{ Component } from 'react';
class Another extends Component {
constructor(props) {
super(props);
this.state = {
son:'子组件'
}
}
componentWillMount() {
console.log('子组件－－Mounting－componentWillMount',this.state.son)
}
componentDidMount() {
console.log('子组件－－Mounting－componentDidMount',this.state.son)
}
componentWillReceiveProps(nextProps) {
console.log('子组件－－Updating-componentWillReceiveProps')
}
shouldComponentUpdate(nextProps,nextState) {
console.log('子组件－－Updating-shouldComponentUpdate')
return true
}
componentWillUpdate(nextProps,nextState) {
console.log('子组件－－Updating-componentWillUpdate')
}
componentDidUpdate(nextProps,nextState) {
console.log('子组件－－Updating-componentDidUpdate')
}
componentWillUnmount() {
}
render() {
return(
<div>
我是子组件－－我是子组件－－我是子组件{this.props.name}
</div>
)
}
}
export default Another;
1）`getInitialState` 设置初始状态值，(掉调用一次)，可使用setState方法更改状态
es6语法则在这是用：
constructor(props) {
super(props);
this.displayName='name';
this.事件名=this.事件名.bind(this);//绑定事件的this,这样初始化只绑定一次，如果在render中邦定，则只要render就邦定一次。
this.state = {
son:'子组件'
}
}
static propTypes = {
value:PropTypes.string,//类型的种类object string array func number bool any
}
static defaultProps={
value:'1'
}
2)`getDefaultProps `设置初始props的值，不可以更改 es6语法参照上面的 static defaultProps 3）`propTypes `验证传递给组件的props es6语法上述 static propTypes 4）`displayName `用于degbug调试消息，如果不写，JSX将从变量赋值中推断出类的displayName，es6语法如上述代码片段中，例如下面
// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav",});
执行的顺序就是上述代码片段的顺序！
三、总结
详细了解生命周期的特性，有助于处理数据，更好的节约性能。本人一点点小的见解，还望各位路过的大神，赏脸批评指正！
