摘要：維護(hù)著一個(gè)全局的，并且根據(jù)來進(jìn)行事件分發(fā)處理。如果想和其它框架集成，使用或者來設(shè)置定時(shí)器，或者發(fā)送請(qǐng)求，可以在該方法中執(zhí)行這些操作。在該函數(shù)中調(diào)用將不會(huì)引起第二次渲染。在該方法中執(zhí)行任何必要的清理，比如無效的定時(shí)器，或者清除在中創(chuàng)建的元素。

@(StuRep)2016.06.10

React.PropTypes.array // 數(shù)組

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

React.PropTypes.func // 函式 

React.PropTypes.number // 數(shù)字

React.PropTypes.object // 對(duì)象 

React.PropTypes.string // 字符串 

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

React.PropTypes.element // React 元素 

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

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

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

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

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

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

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

_

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

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

export default connect(mapStateToProps, mapDispatchToProps)(App)

mapStateToProps 監(jiān)聽store變化，添加這個(gè)才能讓組件監(jiān)聽到store里面的狀態(tài);

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

在不使用Redux的時(shí)候，React組件間的狀態(tài)管理需要一層層地傳遞，使用Redux可以在最頂層的store中存儲(chǔ)所有的狀態(tài)，每個(gè)組件都可以獲得這些狀態(tài)值。

Store

Action

Reducer

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

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

//action創(chuàng)建函數(shù)
export function getNextMonth() {
    return {type: GET_NEXT_MONTH}
}

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

reducer應(yīng)該保持“純函數(shù)”特性，入?yún)⑾嗤?，出參結(jié)果一定相同。這也是函數(shù)式編程的特點(diǎn)。

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中，需要傳入一個(gè)默認(rèn)的state參數(shù)，在dispatch一個(gè)action區(qū)觸發(fā)state修改的時(shí)候，如果reducer中并沒有匹配到該action，那就一定要返回一個(gè)舊的state，不然會(huì)造成undefined。

另外，在修改狀態(tài)的時(shí)候，不要通過直接修改當(dāng)前state，而是通過創(chuàng)建一個(gè)副本去修改，可以用ES6中的Object.assign方法：

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

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

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的展開運(yùn)算符的時(shí)候需要添加一個(gè)插件來支持，因?yàn)槟壳霸撜Z法還處于stage2階段：

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

在 Redux 項(xiàng)目中，Store 是單一的。維護(hù)著一個(gè)全局的 State，并且根據(jù) Action 來進(jìn)行事件分發(fā)處理 State。可以看出 Store 是一個(gè)把 Action 和 Reducer 結(jié)合起來的對(duì)象。

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

let store = createStore(calendarApp);

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

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

render(
    
        
    ,
    rootElement
);

_

componentWillMount()

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

componentDidMount()

在初始化渲染執(zhí)行之后立刻調(diào)用一次，僅客戶端有效（服務(wù)器端不會(huì)調(diào)用）。在生命周期中的這個(gè)時(shí)間點(diǎn)，組件擁有一個(gè) DOM 展現(xiàn)，可以通過 this.getDOMNode() 來獲取相應(yīng) DOM 節(jié)點(diǎn)。

如果想和其它JavaScript 框架集成，使用setTimeout 或者setInterval 來設(shè)置定時(shí)器，或者發(fā)送 AJAX 請(qǐng)求，可以在該方法中執(zhí)行這些操作。

componentWillReceiveProps(object nextProps)

在組件接收到新的 props 的時(shí)候調(diào)用。在初始化渲染的時(shí)候，該方法不會(huì)調(diào)用。

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

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state，將要渲染之前調(diào)用。該方法在初始化渲染的時(shí)候不會(huì)調(diào)用，在使用 forceUpdate 方法的時(shí)候也不會(huì)。

如果確定新的 props 和 state 不會(huì)導(dǎo)致組件更新，則此處應(yīng)該 返回 false。

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

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

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

如果性能是個(gè)瓶頸，尤其是有幾十個(gè)甚至上百個(gè)組件的時(shí)候，使用 shouldComponentUpdate 可以提升應(yīng)用的性能。

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state 之前立刻調(diào)用。在初始化渲染的時(shí)候該方法不會(huì)被調(diào)用。
使用該方法做一些更新之前的準(zhǔn)備工作。

componentDidUpdate(object prevProps, object prevState)

在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會(huì)在初始化渲染的時(shí)候調(diào)用。
使用該方法可以在組件更新之后操作 DOM 元素。

componentWillUnmount()

在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。

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