React生命周期

组件的生命周期分成三个状态：

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是一样的。