组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
下面是生命周期的例子，分别用React.Component和React.createClass呈现：
import React from 'react'
class lifecycle extends React.Component{
//初始化组件状态getInitialState
constructor(props) {
super(props)
this.state = {name: props.name}
this.handleClick = this.handleClick.bind(this)
}
//初始渲染组件之前
componentWillMount() {
console.log("初始render之前 componentWillMount")
}
//初始渲染组件之后（初始render之后）,通知组件已经加载完成
componentDidMount() {
console.log("初始render之后 componentDidMount")
}
//组件收到新的属性（props）
componentWillReceiveProps(nextProps) {
console.log("组件收到新的属性 componentWillReceiveProps")
}
//当组件接收到新的属性（props）和状态（state）改变的话，都会触发
shouldComponentUpdate(nextProps, nextState) {
console.log("组件接收到新的属性（props）和状态（state） shouldComponentUpdate")
return true
}
//如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准备更新组件，并调用 componentWillUpdate()
componentWillUpdate() {
console.log("准备更新组件 componentWillUpdate")
}
//调用了 render() 更新完成界面之后
componentDidUpdate() {
console.log("更新完成界面 componentDidUpdate")
}
//组件移除
componentWillUnmount() {
console.log("组件移除 componentWillUnmount")
}
handleClick() {
console.log(this.state.name)
}
//渲染组件，每次数据更新并且上面的 shouldComponentUpdate(...) 返回为 true，都会调用渲染
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}
lifecycle.propTypes = {
func: React.PropTypes.func,
any: React.PropTypes.any,
bool: React.PropTypes.bool,
func: React.PropTypes.func,
number: React.PropTypes.number,
string: React.PropTypes.string,
name : React.PropTypes.string.isRequired
}
//组件创建之前getDefaultProps
lifecycle.defaultProps = {
name: 'wheat'
}
export default lifecycle
var lifecycle = React.createClass({
propTypes: {
func: React.PropTypes.func,
any: React.PropTypes.any,
bool: React.PropTypes.bool,
func: React.PropTypes.func,
number: React.PropTypes.number,
string: React.PropTypes.string,
name: React.PropTypes.string.isRequired
},
//组件创建之前
getDefaultProps: function() {
return {
name: 'wheat'
};
},
//初始化组件状态
getInitialState : function(){
console.log("初始化组件状态 getInitialState")
return {
name: this.props.name
}
},
//初始渲染组件之前
componentWillMount : function(){
console.log("初始render之前 componentWillMount")
},
//初始渲染组件之后（初始render之后）,通知组件已经加载完成
componentDidMount : function(){
console.log("初始render之后 componentDidMount")
},
//组件收到新的属性（props）
componentWillReceiveProps : function(nextProps){
console.log("组件收到新的属性 componentWillReceiveProps")
},
//当组件接收到新的属性（props）和状态（state）改变的话，都会触发
shouldComponentUpdate : function(nextProps, nextState){
console.log("组件接收到新的属性（props）和状态（state） shouldComponentUpdate")
return true
},
//如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准备更新组件，并调用 componentWillUpdate()
componentWillUpdate : function(){
console.log("准备更新组件 componentWillUpdate")
},
//调用了 render() 更新完成界面之后
componentDidUpdate : function(){
console.log("更新完成界面 componentDidUpdate")
},
//组件移除
componentWillUnmount : function(){
console.log("组件移除 componentWillUnmount")
},
handleClick: function() {
console.log(this.state.name)
},
//渲染组件，每次数据更新并且上面的 shouldComponentUpdate(...) 返回为 true，都会调用渲染
render: function() {
console.log("渲染组件 render")
return (
<div onClick={this.handleClick}></div>
)
}
})
参考资料：
react-without-es6
React Native 中组件的生命周期
React 入门实例教程
注：React Native组件的生命周期和React是一样的。
