一、基本
先来引见一个生命周期的定义：
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 false5) 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阶段
当你的组件封闭的时刻，比方跳转页面的时刻，此周期实行一次。能够做的操纵在上面的定义。
给出一段代码：(就是上述的子组件)
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", });实行的递次就是上述代码片断的递次！
三、总结
细致相识生命周期的特征，有助于处置惩罚数据，更好的勤俭机能。本人一点点小的看法，还望列位途经的大神，赏光批评指正！