摘要：維護著一個全局的，并且根據來進行事件分發處理。如果想和其它框架集成，使用或者來設置定時器，或者發送請求，可以在該方法中執行這些操作。在該函數中調用將不會引起第二次渲染。在該方法中執行任何必要的清理，比如無效的定時器，或者清除在中創建的元素。

@(StuRep)2016.06.10

React.PropTypes.array // 數組

React.PropTypes.bool.isRequired // Boolean 且必要。 

React.PropTypes.func // 函式 

React.PropTypes.number // 數字

React.PropTypes.object // 對象 

React.PropTypes.string // 字符串 

React.PropTypes.node // 任何類型的: numbers, strings, elements 或者任何這種類型的數組

React.PropTypes.element // React 元素 

React.PropTypes.instanceOf(XXX) // 某種類型的實例

React.PropTypes.oneOf(["foo", "bar"]) // 其中一個字符串

React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.array]) // 其中一種格式類型

React.PropTypes.arrayOf(React.PropTypes.string) // 某種類型的數組(字符串型) 

React.PropTypes.objectOf(React.PropTypes.string) // 具有某種屬性類型的對象(字符串類型) 

React.PropTypes.shape({ // 是否符合指定格式的對象
    color: React.PropTypes.string, 
    fontSize: React.PropTypes.number 
}); 

React.PropTypes.any.isRequired // 可以是任何格式，且必要。 

_

//綁定狀態到props上面
function mapStateToProps(state) {
    return {
        year: state.calendarReducer.year,
        month: state.calendarReducer.month,
        day: state.calendarReducer.day
    }
}

//把action所有方法綁定到props上面，同時action具有了dispatch能力
function mapDispatchToProps(dispatch) {
    return {actions: bindActionCreators(CalendarActions, dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

mapStateToProps 監聽store變化，添加這個才能讓組件監聽到store里面的狀態;

Redux 有一個全局的state，通過將根組件包進Provider，將store分發給所有的子組件，而子組件通過connect方法，獲取dispatch事件分發函數，以及需要的props(如果有需要也可以通過connect傳入想分發給子組件的action)
_

在不使用Redux的時候，React組件間的狀態管理需要一層層地傳遞，使用Redux可以在最頂層的store中存儲所有的狀態，每個組件都可以獲得這些狀態值。

Store

Action

Reducer

簡單的流程：dispatch(action)把action分發到reducer，reducer更新狀態然后返回到store，總的容器組件(app)從store(this.props)中獲取的值有變，傳給子組件的屬性變化，觸發render重新渲染。

Redux中，action主要用來傳遞操作State的信息，以一個js對象的形式存在，除了其中的type字段為必須的，其他字段都可以定義。如果采用直接聲明action的方式，在action越來越多的時候就會很難管理，所以有了action的構造工廠：

//action創建函數
export function getNextMonth() {
    return {type: GET_NEXT_MONTH}
}

action用來傳遞信息，reducer就用來處理信息，傳入一個舊的state來返回一個新的state。

reducer應該保持“純函數”特性，入參相同，出參結果一定相同。這也是函數式編程的特點。

function calendarReducer(state = initialState, action) {

    switch (action.type) {
        case GET_NEXT_MONTH:
            return state.month >= 12 ? {...state, year: ++state.year, month: 1} : {...state, month: ++state.month};
        case GET_PRE_MONTH:
            return state.month <= 1 ? {...state, year: --state.year, month: 12} : {...state, month: --state.month};
        default:
            console.log("default calendarReducer state");
            return state;
    }
}

在reducer中，需要傳入一個默認的state參數，在dispatch一個action區觸發state修改的時候，如果reducer中并沒有匹配到該action，那就一定要返回一個舊的state，不然會造成undefined。

另外，在修改狀態的時候，不要通過直接修改當前state，而是通過創建一個副本去修改，可以用ES6中的Object.assign方法：

return Object.assign({}, state, {
        XXX:XXX
})

或者使用ES7提案中的對象展開運算符(...)：

switch (action.type) {
        case GET_NEXT_MONTH:
            return state.month >= 12 ? {...state, year: ++state.year, month: 1} : {...state, month: ++state.month};
        case GET_PRE_MONTH:
            return state.month <= 1 ? {...state, year: --state.year, month: 12} : {...state, month: --state.month};
        default:
            console.log("default calendarReducer state");
            return state;
    }

在使用ES7的展開運算符的時候需要添加一個插件來支持，因為目前該語法還處于stage2階段：

query: {
        presets: ["react", "es2015"],
        plugins: ["transform-object-rest-spread"]
}

在 Redux 項目中，Store 是單一的。維護著一個全局的 State，并且根據 Action 來進行事件分發處理 State。可以看出 Store 是一個把 Action 和 Reducer 結合起來的對象。

Redux 提供了 createStore() 方法來 生產 Store，如：

let store = createStore(calendarApp);

react-redux 提供一個組件把整個app包在里面，以 React 組件的形式來為 Provider 注入 store，從而使得其子組件能夠在上下文中得到 store 對象，共享同一個store，如：

let rootElement = document.getElementById("main");

render(
    
        
    ,
    rootElement
);

_

componentWillMount()

服務器端和客戶端都只調用一次，在初始化渲染執行之前立刻調用。如果在這個方法內調用 setState，render() 將會感知到更新后的 state，將會執行僅一次，盡管 state 改變了。

componentDidMount()

在初始化渲染執行之后立刻調用一次，僅客戶端有效（服務器端不會調用）。在生命周期中的這個時間點，組件擁有一個 DOM 展現，可以通過 this.getDOMNode() 來獲取相應 DOM 節點。

如果想和其它JavaScript 框架集成，使用setTimeout 或者setInterval 來設置定時器，或者發送 AJAX 請求，可以在該方法中執行這些操作。

componentWillReceiveProps(object nextProps)

在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。

用此函數可以作為 react 在 prop 傳入之后， render() 渲染之前更新 state 的機會。老的 props 可以通過 this.props 獲取到。在該函數中調用 this.setState() 將不會引起第二次渲染。

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state，將要渲染之前調用。該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會。

如果確定新的 props 和 state 不會導致組件更新，則此處應該 返回 false。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果 shouldComponentUpdate 返回 false，則 render() 將不會執行，直到下一次 state 改變。（另外，componentWillUpdate 和 componentDidUpdate 也不會被調用。）

默認情況下，shouldComponentUpdate 總會返回 true，在 state 改變的時候避免細微的 bug，但是如果總是小心地把 state 當做不可變的，在 render() 中只從 props 和 state 讀取值，此時可以覆蓋 shouldComponentUpdate 方法，實現新老 props 和 state 的比對邏輯。

如果性能是個瓶頸，尤其是有幾十個甚至上百個組件的時候，使用 shouldComponentUpdate 可以提升應用的性能。

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state 之前立刻調用。在初始化渲染的時候該方法不會被調用。
使用該方法做一些更新之前的準備工作。

componentDidUpdate(object prevProps, object prevState)

在組件的更新已經同步到 DOM 中之后立刻被調用。該方法不會在初始化渲染的時候調用。
使用該方法可以在組件更新之后操作 DOM 元素。

componentWillUnmount()

在組件從 DOM 中移除的時候立刻被調用。

在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount中創建的 DOM 元素。