React原理及其工做流程

react-redux提供了connect和provider兩個好方式，provider將組件和redux關聯起來，將store傳給組件，組件經過dispatch發出action，store根據action的type屬性，調用對應的reducer並傳入state和這個action，reducer對state進行處理並返回一個新的state放入store，connect監聽store發生變化，調用setState更新組件，此時組件的props也就跟着發生變化

connect，Provider，mapStateToProps,mapDispatchToProps,是react-redux提供的，redux自己和react沒有關係，它只是數據處理中心，是react-redux讓它們聯繫在一塊兒。
redux由store，reducer，action組成

store是一個對象，它主要有四個方法

dispatch：用於action的分發，在creactStore中對dispatch進行改造，好比當action傳入dispatch中會當即觸發reducer，有時咱們不但願當即觸發，而是等待異步操做結束後觸發，這時不是隻能傳入一個對象，而是能傳入一個函數，在函數裏咱們dispatch一個action對象，實現了異步

subscribe：監聽state的變化，這個函數調用dispatch時會註冊一個listener監聽state變化當咱們須要知道state是否變化時能夠調用，它返回一個函數，調用這個返回的函數能夠註銷監聽，let unsubscribe=store.subscribe(()=>{console.log("state發生了變化")})

getState：
兩個須要用到的地方：
1.獲取store中的state，用action觸發reducer改變了state時，並將數據傳給reducer這個過程是自動執行的
2.利用subscribe監聽到state發生變化後調用它來獲取新的state數據

replaceReducer:
替換reducer，改變state修改的邏輯

store經過createStore()方法建立，接受三個參數，通過combineReducers合併的reducer和state初始狀態以及改變dispatch的中間件，後兩個參數不是必須的，store的主要做用是將action和reducer聯繫起來並改變state，

action

action是一個對象，其中type屬性是必須的，同時能夠傳入一些數據，action能夠用actionCreator進行創造，dispatch就是把action對象發送出去

reducer

reducer是一個函數，它接受一個state和一個action，根據action的type返回一個新的state根據業務邏輯能夠分爲多個reducer，而後經過combineReducers將它們合併，state中有不少對象，每一個state對象對應一個reducer，
eg：
const reducer =combineReducers(
{
    a:doSomethingWithA,
    b:processB,
    c:c
}
)

combineReducers:

其實它也是一個reducer，它接受整個state和一個action，而後將整個state拆分發送給對應的reducer進行處理，全部的reducer會收到相同的action，不過他們會根據action的type進行判斷，有這個就進行處理而後返回新的state，沒有就返回默認值，而後分散的state又會整合在一塊兒返回一個新的state，

connect

connect（mapStateToProps,mapDispatchToProps,mergeProps,options）是一個函數，它接受
四個參數而且再返回一個函數，wrapWithConnect，wrapWithConnect接受一個組件做爲參數，它的內部定義一個新組件，並將傳入的組件做爲Connect的子組件而後return回去。

完整寫法：
connect（mapStateToProps,mapDispatchToProps,mergeProps,options）（component）

mapStateToProps（state，[ownProps]）

1.mapStateToProps接受兩個參數，store的state和自定義的props，
2.並返回一個新的對象，這個對象會做爲props的一部分傳入ui組件，
3.咱們能夠根據組件所須要的數據自定義返回一個對象，ownProps的變化也會觸發mapStateProps
function mapStateToProps(state){
    return {todos:state.todos};
}

mapDispatchToProps(dispatch,[ownProps])

1.mapDispatchToProps若是是對象，那麼會和store綁定做爲props的一部分傳入ui組件
2.若是是個函數，它接受兩個參數，bindActionCreators會將action和dispatch綁定並返回一個對象，這個對象會和ownProps一塊兒做爲props的一部分傳入ui組件，
3.因此不論mapDispatchToProps是對象仍是函數，它最終都會返回一個對象，若是是函數，這個對象的key值是能夠自定義的。
4.mapDispatchToProps返回的對象屬性其實就是一個個actionCeator，由於已經和dispatch綁定，因此當調用actionCreator時會當即發送action，而不是手動dispatch，
5.ownProps的變化也會觸發mapDispatchToProps

mergeProps(tateProps,dispatchProps,ownProps)

將 mapStateToProps()和mapDispatchToProps()返回的對象和組件自身的props合併成新的props並傳入組件，默認返回stateProps和dispatchProps的結果之和

options：

pure=true表示Connect容器組件將在shouldComponentUpdate中對store的state和ownProps進行淺對比，判斷是否發生變化，優化性能，爲false則不對比。

完整的React--Redux--React流程

一.Provider組件接受redux的store做爲props，而後經過context往下傳

二.connect函數在初始化的時候會將mapDispatchToProps對象綁定到store，

若是mapDispatchToProps是函數則在Connect組件得到store以後，
根據傳入的store.dispatch和action經過bindActionCreators進行綁定，再將返回的對象綁定到store，connect函數會返回一個wrapWithConnect函數，
同時wrapWithConnect會被調用且傳入一個ui組件，wrapWithConnect內部定義了一個Connect組件，傳入的ui組件是Connect的子組件，

而後Connect組件會經過context得到store，並經過store.getState得到完整的state對象，將state傳入mapStateToProps返回stateProps對象，

而後Connect組件會經過context得到store，並經過store.getState得到完整的state對象，將state傳入mapStateToProps返回stateProps對象、mapDispatchToProps對象或mapDispatchToProps函數會返回一個dispatchProps對象，stateProps、dispatchProps以及Connect組件的props

三.
此時ui組件就能夠在props中找到actionCreator，

當咱們調用actionCreator時會自動調用dispatch，

在dispatch中會調用getState獲取整個state，同時註冊一個listener監聽state的變化，
store將得到的state和action傳給combineReducers，

combineReducers會將state依據state的key值分別傳給子reducer，並將action傳給所有子reducer，

reducer會被依次執行進行action.type的判斷，若是有則返回一個新的state，若是沒有則返回默認。

combineReducers再次將子reducer返回的單個state進行合併成一個新的完整的state。此時state發生了變化。

dispatch在state返回新的值以後會調用全部註冊的listener函數其中包括handleChange函數，

handleChange函數內部首先調用getState獲取新的state值並對新舊兩個state進行淺對比，若是相同直接return，

若是不一樣則調用mapStateToProps獲取stateProps並將新舊兩個stateProps進行淺對比，若是相同，直接return結束，不進行後續操做。
若是不相同則調用this.setState()觸發Connect組件的更新，傳入ui組件，觸發ui組件的更新，此時ui組件得到新的props，

react --> redux --> react 的一次流程結束。