野心勃勃的React組件生命周期

 1 import React, { Component } from 'react'
 2 var Dialog = React.createClass({
 3     render: function(){
 4         return(
 5             <div>
 6                 Hello React
 7            </div>
 8         )
 9     }
10 })

getDefaultProps: function () {
    return{
        //在組件類創建的時候調用一次，然后返回值被緩存下來。這是第一個觸發的方法，返回的值可以用this.props訪問，此值在所有實例間共享
    }
｝

getInitialState: function () {
    return{
        //在組件掛載之前調用一次。返回值將會作為 this.state 的初始值，這是第二個觸發的方法
    }
}

componentWillMount: function(){
    //在初始化渲染執行之前立刻調用，只會調用一次
    //如果在這個方法內調用 setState，render() 將會感知到更新后的 state，將會執行僅一次渲染，盡管 state 改變了。
}

componentWillReceiveProps: function (nextProps){
    //該方法在初始化渲染的時候不會調用
    //在組件接收到新的 props 的時候調用。
    //這個方法里給你在渲染之前根據傳入的屬性來更新狀態的機會
    this.setState({title: nextProps.dialog.get('title')});
}

shouldComponentUpdate: function(nextProps, nextState) {
    //該方法在初始化渲染的時候不會調用, 在使用 forceUpdate 方法的時候也不會。
    //返回布爾值，true表示渲染組件，false表示本次不會運行render渲染調用，默認返回true
    // 在接收到新的 props 或者 state，將要渲染之前調用。
    //如果確定新的 props 和 state 不會導致組件更新，則此處應該 返回 false
}

componentWillUpdate: function (nextProps, nextState) {
    //該方法在初始化渲染的時候不會調用
    //在接收到新的 props 或者 state 之前立刻調用.使用該方法做一些更新之前的準備工作.
    //當shouldComponentUpdate返回true時會在render之前調用.
    //你不能在這個方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。
}

render: function () {
   //初始化渲染的時候會調用，在第一次初始化渲染的時候不理會shouldComponentUpdate的返回值
   //因為shouldComponentUpdate默認返回true，而第一次初始化渲染時候，shouldComponentUpdate是不會調用的，不管你返回true或false。
   //有點繞，多讀幾遍。
   //當不是初始化渲染時，如果shouldComponentUpdate返回false，則不會調用render方法。
   //在這里可以使用this.props和this.state來獲取數據，請不要在這個方法里改變state
}

componentDidUpdate: function (prevProps, prevState) {
    //該方法在初始化渲染的時候不會調用
    //組件render方法后調用此方法，在組件的更新已經同步到 DOM 中之后立刻被調用，使用該方法可以在組件更新之后操作 DOM 元素。
}

componentDidMount: function(){
   //在初始化渲染執行之后立刻調用，只會調用一次
   //組件已經加載到dom里，在這里可以和瀏覽器交互，直接操作頁面上原始的Dom元素，比如$.ajax調用等等
   window.addEventListener("keydown", this.listenKeyboard, true);
}

componentWillUnmount: function() {
    //在組件從 DOM 中移除的時候立刻被調用。在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。
    window.removeEventListener("keydown", this.listenKeyboard, true);
}

React組件頁面觸發結果如下：

第一次頁面加載時候組件的生命周期如下：
getDefaultProps -> getInitialState -> componentWillMount -> render ->componentDidMount

如果時在Redux（后面會講到）里加載組件，則生命周期如下：
getDefaultProps -> getInitialState -> componentWillMount -> render ->componentDidMount
-> componentWillReceiveProps -> shouldComponentUpdate

第二次生命周期：
componentWillReceiverProps -> shouldComponentUpdate -> componentWillUpdate -> render
-> componentDidUpdate

如果shouldComponentUpdate返回false，則 componentWillUpdate -> render -> componentDidUpdate這三個方法不會被觸發:
componentWillReceiverProps -> shouldComponentUpdate

1 import { combineReducers } from 'redux'
2 const reducers = combineReducers({
3     form,
4     items,
5     dialog
6 })

 1 import { bindActionCreators } from 'redux'
 2 import { connect } from 'react-redux'
 3 import * as AllActions from '../actions'
 4 export default connect(state => ({
 5     form: state.form,
 6     items: state.items,
 7     dialog: state.dialog,
 8 }), dispatch => ({
 9     actions: bindActionCreators(AllActions, dispatch)
10 }))(App)