React組件的生命週期各環節運做流程

'use strict';
React.createClass({
    //1.建立階段
    getDefaultProps:function(){
        //在建立類的時候被調用
        console.log('getDefaultProps');
        return {};
    },
    //2.實例化階段
    getInitialState:function(){
        //獲取this.state的默認值
        console.log('getInitailState');
        return {};
    },
    componentWillMount:function(){
        //在render以前調用
        //業務邏輯的處理放這，如對state的操做
        console.log('componentWillMount');
    },
    render:function(){
        //渲染並返回一個虛擬DOM
        console.log('render');
        return (
            <h1>{this.props.value}</h1>
        );
    },
    componentDidMount:function(){
        //該方法發生在render方法以後。
        //在這裏React會使用render方法返回的虛擬DOM對象來建立真實的DOM結構
        console.log('componentDidMount');
    },
    //3.更新階段
    componentWillRecieveProps:function(){
        //該方法發生在this.props被修改或父組件調用setProps()方法以後
        console.log('componentWillRecieveProps');
    },
    shouldComponentUpdate:function(){
        //是否須要更新
        console.log('shouldComponentUpdate');
        return true;
    },
    componentWillUpdate:function(){
        //將要更新
        console.log('componentWillUpdate');
    },
    componentDidUpdate:function(){
        //更新完畢
        console.log('componentDidUpdate');
    },
    //4.銷燬階段
    componentWillUnmount:function(){
        //銷燬時被調用
        console.log('componentWillUnmount');
    }
});