做React需要會(huì)什么？
react的功能其實(shí)很單一，主要負(fù)責(zé)渲染的功能，現(xiàn)有的框架，比如angular是一個(gè)大而全的框架，用了angular幾乎就不需要用其他工具輔助配合，但是react不一樣，他只負(fù)責(zé)ui渲染，想要做好一個(gè)項(xiàng)目，往往需要其他庫和工具的配合，比如用redux來管理數(shù)據(jù)，react-router管理路由，react已經(jīng)全面擁抱es6，所以es6也得掌握，webpack就算是不會(huì)配置也要會(huì)用，要想提高性能，需要按需加載，immutable.js也得用上，還有單元測試……
http://www.tuicool.com/articles/eAbii23
用腳本進(jìn)行DOM操作的代價(jià)很昂貴。有個(gè)貼切的比喻，把DOM和JavaScript各自想象為一個(gè)島嶼，它們之間用收費(fèi)橋梁連接，js每次訪問DOM，都要途徑這座橋，并交納“過橋費(fèi)”,訪問DOM的次數(shù)越多，費(fèi)用也就越高。 因此，推薦的做法是盡量減少過橋的次數(shù)，努力待在ECMAScript島上。因?yàn)檫@個(gè)原因react的虛擬dom就顯得難能可貴了，它創(chuàng)造了虛擬dom并且將它們儲(chǔ)存起來，每當(dāng)狀態(tài)發(fā)生變化的時(shí)候就會(huì)創(chuàng)造新的虛擬節(jié)點(diǎn)和以前的進(jìn)行對(duì)比，讓變化的部分進(jìn)行渲染。整個(gè)過程沒有對(duì)dom進(jìn)行獲取和操作，只有一個(gè)渲染的過程，所以react說是一個(gè)ui框架。
react的一個(gè)組件很明顯的由dom視圖和state數(shù)據(jù)組成，兩個(gè)部分涇渭分明。state是數(shù)據(jù)中心，它的狀態(tài)決定著視圖的狀態(tài)。這時(shí)候發(fā)現(xiàn)似乎和我們一直推崇的MVC開發(fā)模式有點(diǎn)區(qū)別，沒了Controller控制器，那用戶交互怎么處理，數(shù)據(jù)變化誰來管理？然而這并不是react所要關(guān)心的事情，它只負(fù)責(zé)ui的渲染。與其他框架監(jiān)聽數(shù)據(jù)動(dòng)態(tài)改變dom不同，react采用setState來控制視圖的更新。setState會(huì)自動(dòng)調(diào)用render函數(shù)，觸發(fā)視圖的重新渲染，如果僅僅只是state數(shù)據(jù)的變化而沒有調(diào)用setState，并不會(huì)觸發(fā)更新。 組件就是擁有獨(dú)立功能的視圖模塊，許多小的組件組成一個(gè)大的組件，整個(gè)頁面就是由一個(gè)個(gè)組件組合而成。它的好處是利于重復(fù)利用和維護(hù)。
react的diff算法用在什么地方呢？當(dāng)組件更新的時(shí)候，react會(huì)創(chuàng)建一個(gè)新的虛擬dom樹并且會(huì)和之前儲(chǔ)存的dom樹進(jìn)行比較，這個(gè)比較多過程就用到了diff算法，所以組件初始化的時(shí)候是用不到的。react提出了一種假設(shè)，相同的節(jié)點(diǎn)具有類似的結(jié)構(gòu)，而不同的節(jié)點(diǎn)具有不同的結(jié)構(gòu)。在這種假設(shè)之上進(jìn)行逐層的比較，如果發(fā)現(xiàn)對(duì)應(yīng)的節(jié)點(diǎn)是不同的，那就直接刪除舊的節(jié)點(diǎn)以及它所包含的所有子節(jié)點(diǎn)然后替換成新的節(jié)點(diǎn)。如果是相同的節(jié)點(diǎn)，則只進(jìn)行屬性的更改。
對(duì)于列表的diff算法稍有不同，因?yàn)榱斜硗ǔ＞哂邢嗤慕Y(jié)構(gòu)，在對(duì)列表節(jié)點(diǎn)進(jìn)行刪除，插入，排序的時(shí)候，單個(gè)節(jié)點(diǎn)的整體操作遠(yuǎn)比一個(gè)個(gè)對(duì)比一個(gè)個(gè)替換要好得多，所以在創(chuàng)建列表的時(shí)候需要設(shè)置key值，這樣react才能分清誰是誰。當(dāng)然不寫key值也可以，但這樣通常會(huì)報(bào)出警告，通知我們加上key值以提高react的性能。
組件的創(chuàng)造方法為React.createClass() ——?jiǎng)?chuàng)造一個(gè)類，react系統(tǒng)內(nèi)部設(shè)計(jì)了一套類系統(tǒng)，利用它來創(chuàng)造react組件。但這并不是必須的，我們還可以用es6的class類來創(chuàng)造組件,這也是Facebook官方推薦的寫法。
這兩種寫法實(shí)現(xiàn)的功能一樣但是原理卻是不同，es6的class類可以看作是構(gòu)造函數(shù)的一個(gè)語法糖，可以把它當(dāng)成構(gòu)造函數(shù)來看，extends實(shí)現(xiàn)了類之間的繼承 —— 定義一個(gè)類Main 繼承React.Component所有的屬性和方法，組件的生命周期函數(shù)就是從這來的。constructor是構(gòu)造器，在實(shí)例化對(duì)象時(shí)調(diào)用，super調(diào)用了父類的constructor創(chuàng)造了父類的實(shí)例對(duì)象this，然后用子類的構(gòu)造函數(shù)進(jìn)行修改。這和es5的原型繼承是不同的，原型繼承是先創(chuàng)造一個(gè)實(shí)例化對(duì)象this，然后再繼承父級(jí)的原型方法。了解了這些之后我們?cè)诳唇M件的時(shí)候就清楚很多。
當(dāng)我們使用組件< Main />時(shí)，其實(shí)是對(duì)Main類的實(shí)例化——new Main，只不過react對(duì)這個(gè)過程進(jìn)行了封裝，讓它看起來更像是一個(gè)標(biāo)簽。
有三點(diǎn)值得注意：1、定義類名字的首字母必須大寫 2、因?yàn)閏lass變成了關(guān)鍵字，類選擇器需要用className來代替。 3、類和模塊內(nèi)部默認(rèn)使用嚴(yán)格模式，所以不需要用use strict指定運(yùn)行模式。
組件在初始化時(shí)會(huì)觸發(fā)5個(gè)鉤子函數(shù)：
設(shè)置默認(rèn)的props，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性。
在使用es6的class語法時(shí)是沒有這個(gè)鉤子函數(shù)的，可以直接在constructor中定義this.state。此時(shí)可以訪問this.props。
組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state。
react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹都在此進(jìn)行。此時(shí)就不能更改state了。
組件渲染之后調(diào)用，可以通過this.getDOMNode()獲取和操作dom節(jié)點(diǎn)，只調(diào)用一次。
在更新時(shí)也會(huì)觸發(fā)5個(gè)鉤子函數(shù)：
6、componentWillReceivePorps(nextProps)
組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。
7、shouldComponentUpdate(nextProps, nextState)
react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時(shí)調(diào)用，我們可以設(shè)置在此對(duì)比前后兩個(gè)props和state是否相同，如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹，這樣就不需要?jiǎng)?chuàng)造新的dom樹和舊的dom樹進(jìn)行diff算法對(duì)比，節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候。不過調(diào)用this.forceUpdate會(huì)跳過此步驟。
8、componentWillUpdata(nextProps, nextState)
組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state
不多說
組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)。
還有一個(gè)卸載鉤子函數(shù)
組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽和定時(shí)器需要在此時(shí)清除。
以上可以看出來react總共有10個(gè)周期函數(shù)（render重復(fù)一次），這個(gè)10個(gè)函數(shù)可以滿足我們所有對(duì)組件操作的需求，利用的好可以提高開發(fā)效率和組件性能。
Router就是React的一個(gè)組件，它并不會(huì)被渲染，只是一個(gè)創(chuàng)建內(nèi)部路由規(guī)則的配置對(duì)象，根據(jù)匹配的路由地址展現(xiàn)相應(yīng)的組件。Route則對(duì)路由地址和組件進(jìn)行綁定，Route具有嵌套功能，表示路由地址的包涵關(guān)系，這和組件之間的嵌套并沒有直接聯(lián)系。Route可以向綁定的組件傳遞7個(gè)屬性：children，history，location，params，route，routeParams，routes，每個(gè)屬性都包涵路由的相關(guān)的信息。比較常用的有children（以路由的包涵關(guān)系為區(qū)分的組件），location（包括地址，參數(shù)，地址切換方式，key值，hash值）。react-router提供Link標(biāo)簽，這只是對(duì)a標(biāo)簽的封裝，值得注意的是，點(diǎn)擊鏈接進(jìn)行的跳轉(zhuǎn)并不是默認(rèn)的方式，react-router阻止了a標(biāo)簽的默認(rèn)行為并用pushState進(jìn)行hash值的轉(zhuǎn)變。切換頁面的過程是在點(diǎn)擊Link標(biāo)簽或者后退前進(jìn)按鈕時(shí)，會(huì)先發(fā)生url地址的轉(zhuǎn)變，Router監(jiān)聽到地址的改變根據(jù)Route的path屬性匹配到對(duì)應(yīng)的組件，將state值改成對(duì)應(yīng)的組件并調(diào)用setState觸發(fā)render函數(shù)重新渲染dom。
當(dāng)頁面比較多時(shí)，項(xiàng)目就會(huì)變得越來越大，尤其對(duì)于單頁面應(yīng)用來說，初次渲染的速度就會(huì)很慢，這時(shí)候就需要按需加載，只有切換到頁面的時(shí)候才去加載對(duì)應(yīng)的js文件。react配合webpack進(jìn)行按需加載的方法很簡單，Route的component改為getComponent，組件用require.ensure的方式獲取，并在webpack中配置chunkFilename。
react推崇的是單向數(shù)據(jù)流，自上而下進(jìn)行數(shù)據(jù)的傳遞，但是由下而上或者不在一條數(shù)據(jù)流上的組件之間的通信就會(huì)變的復(fù)雜。解決通信問題的方法很多，如果只是父子級(jí)關(guān)系，父級(jí)可以將一個(gè)回調(diào)函數(shù)當(dāng)作屬性傳遞給子級(jí)，子級(jí)可以直接調(diào)用函數(shù)從而和父級(jí)通信。
組件層級(jí)嵌套到比較深，可以使用上下文getChildContext來傳遞信息，這樣在不需要將函數(shù)一層層往下傳，任何一層的子級(jí)都可以通過this.context直接訪問。
兄弟關(guān)系的組件之間無法直接通信，它們只能利用同一層的上級(jí)作為中轉(zhuǎn)站。而如果兄弟組件都是最高層的組件，為了能夠讓它們進(jìn)行通信，必須在它們外層再套一層組件，這個(gè)外層的組件起著保存數(shù)據(jù)，傳遞信息的作用，這其實(shí)就是redux所做的事情。
組件之間的信息還可以通過全局事件來傳遞。不同頁面可以通過參數(shù)傳遞數(shù)據(jù)，下個(gè)頁面可以用location.param來獲取。其實(shí)react本身很簡單，難的在于如何優(yōu)雅高效的實(shí)現(xiàn)組件之間數(shù)據(jù)的交流。
首先，redux并不是必須的，它的作用相當(dāng)于在頂層組件之上又加了一個(gè)組件，作用是進(jìn)行邏輯運(yùn)算、儲(chǔ)存數(shù)據(jù)和實(shí)現(xiàn)組件尤其是頂層組件的通信。如果組件之間的交流不多，邏輯不復(fù)雜，只是單純的進(jìn)行視圖的渲染，這時(shí)候用回調(diào)，context就行，沒必要用redux，用了反而影響開發(fā)速度。但是如果組件交流特別頻繁，邏輯很復(fù)雜，那redux的優(yōu)勢就特別明顯了。我第一次做react項(xiàng)目的時(shí)候并沒有用redux，所有的邏輯都是在組件內(nèi)部實(shí)現(xiàn)，當(dāng)時(shí)為了實(shí)現(xiàn)一個(gè)邏輯比較復(fù)雜的購物車，洋洋灑灑居然寫了800多行代碼，回頭一看我自己都不知道寫的是啥，畫面太感人。
先簡單說一下redux和react是怎么配合的。react-redux提供了connect和Provider兩個(gè)好基友，它們一個(gè)將組件與redux關(guān)聯(lián)起來，一個(gè)將store傳給組件。組件通過dispatch發(fā)出action，store根據(jù)action的type屬性調(diào)用對(duì)應(yīng)的reducer并傳入state和這個(gè)action，reducer對(duì)state進(jìn)行處理并返回一個(gè)新的state放入store，connect監(jiān)聽到store發(fā)生變化，調(diào)用setState更新組件，此時(shí)組件的props也就跟著變化。
值得注意的是connect，Provider，mapStateToProps,mapDispatchToProps是react-redux提供的，redux本身和react沒有半毛錢關(guān)系，它只是數(shù)據(jù)處理中心，沒有和react產(chǎn)生任何耦合，是react-redux讓它們聯(lián)系在一起。
接下來具體分析一下，redux以及react-redux到底是怎么實(shí)現(xiàn)的。
給大家看一張圖片吧
明顯比第一張要復(fù)雜，其實(shí)兩張圖說的是同一件事。從上而下慢慢分析：
redux主要由三部分組成：store，reducer，action。
store是一個(gè)對(duì)象，它有四個(gè)主要的方法：
用于action的分發(fā)——在createStore中可以用middleware中間件對(duì)dispatch進(jìn)行改造，比如當(dāng)action傳入dispatch會(huì)立即觸發(fā)reducer，有些時(shí)候我們不希望它立即觸發(fā)，而是等待異步操作完成之后再觸發(fā)，這時(shí)候用redux-thunk對(duì)dispatch進(jìn)行改造，以前只能傳入一個(gè)對(duì)象，改造完成后可以傳入一個(gè)函數(shù)，在這個(gè)函數(shù)里我們手動(dòng)dispatch一個(gè)action對(duì)象，這個(gè)過程是可控的，就實(shí)現(xiàn)了異步。
監(jiān)聽state的變化——這個(gè)函數(shù)在store調(diào)用dispatch時(shí)會(huì)注冊(cè)一個(gè)listener監(jiān)聽state變化，當(dāng)我們需要知道state是否變化時(shí)可以調(diào)用，它返回一個(gè)函數(shù)，調(diào)用這個(gè)返回的函數(shù)可以注銷監(jiān)聽。
let unsubscribe = store.subscribe(() => {console.log(‘state發(fā)生了變化’)})
獲取store中的state——當(dāng)我們用action觸發(fā)reducer改變了state時(shí)，需要再拿到新的state里的數(shù)據(jù)，畢竟數(shù)據(jù)才是我們想要的。getState主要在兩個(gè)地方需要用到，一是在dispatch拿到action后store需要用它來獲取state里的數(shù)據(jù)，并把這個(gè)數(shù)據(jù)傳給reducer，這個(gè)過程是自動(dòng)執(zhí)行的，二是在我們利用subscribe監(jiān)聽到state發(fā)生變化后調(diào)用它來獲取新的state數(shù)據(jù)，如果做到這一步，說明我們已經(jīng)成功了。
替換reducer，改變state修改的邏輯。
store可以通過createStore()方法創(chuàng)建，接受三個(gè)參數(shù)，經(jīng)過combineReducers合并的reducer和state的初始狀態(tài)以及改變dispatch的中間件，后兩個(gè)參數(shù)并不是必須的。store的主要作用是將action和reducer聯(lián)系起來并改變state。
action是一個(gè)對(duì)象，其中type屬性是必須的，同時(shí)可以傳入一些數(shù)據(jù)。action可以用actionCreactor進(jìn)行創(chuàng)造。dispatch就是把a(bǔ)ction對(duì)象發(fā)送出去。
reducer是一個(gè)函數(shù)，它接受一個(gè)state和一個(gè)action，根據(jù)action的type返回一個(gè)新的state。根據(jù)業(yè)務(wù)邏輯可以分為很多個(gè)reducer，然后通過combineReducers將它們合并，state樹中有很多對(duì)象，每個(gè)state對(duì)象對(duì)應(yīng)一個(gè)reducer，state對(duì)象的名字可以在合并時(shí)定義。
像這個(gè)樣子：
const reducer = combineReducers({? ? a:doSomethingWithA,? ? b:processB,? ? c:c})
其實(shí)它也是一個(gè)reducer，它接受整個(gè)state和一個(gè)action，然后將整個(gè)state拆分發(fā)送給對(duì)應(yīng)的reducer進(jìn)行處理，所有的reducer會(huì)收到相同的action，不過它們會(huì)根據(jù)action的type進(jìn)行判斷，有這個(gè)type就進(jìn)行處理然后返回新的state，沒有就返回默認(rèn)值，然后這些分散的state又會(huì)整合在一起返回一個(gè)新的state樹。
接下來分析一下整體的流程，首先調(diào)用store.dispatch將action作為參數(shù)傳入，同時(shí)用getState獲取當(dāng)前的狀態(tài)樹state并注冊(cè)subscribe的listener監(jiān)聽state變化，再調(diào)用combineReducers并將獲取的state和action傳入。combineReducers會(huì)將傳入的state和action傳給所有reducer，reducer會(huì)根據(jù)state的key值獲取與自己對(duì)應(yīng)的state，并根據(jù)action的type返回新的state，觸發(fā)state樹的更新，我們調(diào)用subscribe監(jiān)聽到state發(fā)生變化后用getState獲取新的state數(shù)據(jù)。
redux的state和react的state兩者完全沒有關(guān)系，除了名字一樣。
上面分析了redux的主要功能，那么react-redux到底做了什么？
如果只使用redux，那么流程是這樣的：
component –> dispatch(action) –> reducer –> subscribe –> getState –> component
用了react-redux之后流程是這樣的：
component –> actionCreator(data) –> reducer –> component
store的三大功能：dispatch，subscribe，getState都不需要手動(dòng)來寫了。react-redux幫我們做了這些，同時(shí)它提供了兩個(gè)好基友Provider和connect。
Provider是一個(gè)組件，它接受store作為props，然后通過context往下傳，這樣react中任何組件都可以通過contex獲取store。也就意味著我們可以在任何一個(gè)組件里利用dispatch(action)來觸發(fā)reducer改變state，并用subscribe監(jiān)聽state的變化，然后用getState獲取變化后的值。但是并不推薦這樣做，它會(huì)讓數(shù)據(jù)流變的混亂，過度的耦合也會(huì)影響組件的復(fù)用，維護(hù)起來也更麻煩。
connect –connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一個(gè)函數(shù)，它接受四個(gè)參數(shù)并且再返回一個(gè)函數(shù)–wrapWithConnect，wrapWithConnect接受一個(gè)組件作為參數(shù)wrapWithConnect(component)，它內(nèi)部定義一個(gè)新組件Connect(容器組件)并將傳入的組件(ui組件)作為Connect的子組件然后return出去。
所以它的完整寫法是這樣的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)
mapStateToProps(state, [ownProps])：
mapStateToProps 接受兩個(gè)參數(shù)，store的state和自定義的props，并返回一個(gè)新的對(duì)象，這個(gè)對(duì)象會(huì)作為props的一部分傳入ui組件。我們可以根據(jù)組件所需要的數(shù)據(jù)自定義返回一個(gè)對(duì)象。ownProps的變化也會(huì)觸發(fā)mapStateToProps
functionmapStateToProps(state){return{ todos: state.todos };}
mapDispatchToProps(dispatch, [ownProps])：
mapDispatchToProps如果是對(duì)象，那么會(huì)和store綁定作為props的一部分傳入ui組件。如果是個(gè)函數(shù)，它接受兩個(gè)參數(shù)，bindActionCreators會(huì)將action和dispatch綁定并返回一個(gè)對(duì)象，這個(gè)對(duì)象會(huì)和ownProps一起作為props的一部分傳入ui組件。所以不論mapDispatchToProps是對(duì)象還是函數(shù)，它最終都會(huì)返回一個(gè)對(duì)象，如果是函數(shù)，這個(gè)對(duì)象的key值是可以自定義的
functionmapDispatchToProps(dispatch){return{? ? ? todoActions: bindActionCreators(todoActionCreators, dispatch),? ? ? counterActions: bindActionCreators(counterActionCreators, dispatch)? };}
mapDispatchToProps返回的對(duì)象其屬性其實(shí)就是一個(gè)個(gè)actionCreator，因?yàn)橐呀?jīng)和dispatch綁定，所以當(dāng)調(diào)用actionCreator時(shí)會(huì)立即發(fā)送action，而不用手動(dòng)dispatch。ownProps的變化也會(huì)觸發(fā)mapDispatchToProps。
mergeProps(stateProps, dispatchProps, ownProps)：
將mapStateToProps() 與 mapDispatchToProps()返回的對(duì)象和組件自身的props合并成新的props并傳入組件。默認(rèn)返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的結(jié)果。
pure = true 表示Connect容器組件將在shouldComponentUpdate中對(duì)store的state和ownProps進(jìn)行淺對(duì)比，判斷是否發(fā)生變化，優(yōu)化性能。為false則不對(duì)比。
其實(shí)connect函數(shù)并沒有做什么，大部分的邏輯都是在它返回的wrapWithConnect函數(shù)內(nèi)實(shí)現(xiàn)的，確切的說是在wrapWithConnect內(nèi)定義的Connect組件里實(shí)現(xiàn)的。
下面是一個(gè)完整的 react –> redux –> react 流程：
一、Provider組件接受redux的store作為props，然后通過context往下傳。
二、connect函數(shù)在初始化的時(shí)候會(huì)將mapDispatchToProps對(duì)象綁定到store，如果mapDispatchToProps是函數(shù)則在Connect組件獲得store后，根據(jù)傳入的store.dispatch和action通過bindActionCreators進(jìn)行綁定，再將返回的對(duì)象綁定到store，connect函數(shù)會(huì)返回一個(gè)wrapWithConnect函數(shù)，同時(shí)wrapWithConnect會(huì)被調(diào)用且傳入一個(gè)ui組件，wrapWithConnect內(nèi)部使用class Connect extends Component定義了一個(gè)Connect組件，傳入的ui組件就是Connect的子組件，然后Connect組件會(huì)通過context獲得store，并通過store.getState獲得完整的state對(duì)象，將state傳入mapStateToProps返回stateProps對(duì)象、mapDispatchToProps對(duì)象或mapDispatchToProps函數(shù)會(huì)返回一個(gè)dispatchProps對(duì)象，stateProps、dispatchProps以及Connect組件的props三者通過Object.assign()，或者mergeProps合并為props傳入ui組件。然后在ComponentDidMount中調(diào)用store.subscribe，注冊(cè)了一個(gè)回調(diào)函數(shù)handleChange監(jiān)聽state的變化。
三、此時(shí)ui組件就可以在props中找到actionCreator，當(dāng)我們調(diào)用actionCreator時(shí)會(huì)自動(dòng)調(diào)用dispatch，在dispatch中會(huì)調(diào)用getState獲取整個(gè)state，同時(shí)注冊(cè)一個(gè)listener監(jiān)聽state的變化，store將獲得的state和action傳給combineReducers，combineReducers會(huì)將state依據(jù)state的key值分別傳給子reducer，并將action傳給全部子reducer，reducer會(huì)被依次執(zhí)行進(jìn)行action.type的判斷，如果有則返回一個(gè)新的state，如果沒有則返回默認(rèn)。combineReducers再次將子reducer返回的單個(gè)state進(jìn)行合并成一個(gè)新的完整的state。此時(shí)state發(fā)生了變化。Connect組件中調(diào)用的subscribe會(huì)監(jiān)聽到state發(fā)生了變化，然后調(diào)用handleChange函數(shù)，handleChange函數(shù)內(nèi)部首先調(diào)用getState獲取新的state值并對(duì)新舊兩個(gè)state進(jìn)行淺對(duì)比，如果相同直接return，如果不同則調(diào)用mapStateToProps獲取stateProps并將新舊兩個(gè)stateProps進(jìn)行淺對(duì)比，如果相同，直接return結(jié)束，不進(jìn)行后續(xù)操作。如果不相同則調(diào)用this.setState()觸發(fā)Connect組件的更新，傳入ui組件，觸發(fā)ui組件的更新，此時(shí)ui組件獲得新的props，react –> redux –> react 的一次流程結(jié)束。
一、Provider組件接受redux的store作為props，然后通過context往下傳。
二、connect函數(shù)收到Provider傳出的store，然后接受三個(gè)參數(shù)mapStateToProps，mapDispatchToProps和組件，并將state和actionCreator以props傳入組件，這時(shí)組件就可以調(diào)用actionCreator函數(shù)來觸發(fā)reducer函數(shù)返回新的state，connect監(jiān)聽到state變化調(diào)用setState更新組件并將新的state傳入組件。
connect可以寫的非常簡潔，mapStateToProps，mapDispatchToProps只不過是傳入的回調(diào)函數(shù)，connect函數(shù)在必要的時(shí)候會(huì)調(diào)用它們，名字不是固定的，甚至可以不寫名字。
簡化版本：
connect(state=> state, action)(Component);
上面說了react，react-router和redux的知識(shí)點(diǎn)。但是怎么樣將它們整合起來，搭建一個(gè)完整的項(xiàng)目。
1、先引用 react.js，redux，react-router 等基本文件，建議用npm安裝，直接在文件中引用。
2、從 react.js，redux，react-router 中引入所需要的對(duì)象和方法。
importReact, {Component, PropTypes} from'react';importReactDOM, {render} from'react-dom';import{Provider, connect} from'react-redux';import{createStore, combineReducers, applyMiddleware} from'redux';import{ Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from'react-router';
3、根據(jù)需求創(chuàng)建頂層ui組件，每個(gè)頂層ui組件對(duì)應(yīng)一個(gè)頁面。
4、創(chuàng)建actionCreators和reducers，并用combineReducers將所有的reducer合并成一個(gè)大的reduer。利用createStore創(chuàng)建store并引入combineReducers和applyMiddleware。
5、利用connect將actionCreator，reuder和頂層的ui組件進(jìn)行關(guān)聯(lián)并返回一個(gè)新的組件。
6、利用connect返回的新的組件配合react-router進(jìn)行路由的部署，返回一個(gè)路由組件Router。
7、將Router放入最頂層組件Provider，引入store作為Provider的屬性。
8、調(diào)用render渲染Provider組件且放入頁面的標(biāo)簽中。
可以看到頂層的ui組件其實(shí)被套了四層組件，Provider，Router，Route，Connect，這四個(gè)組件并不會(huì)在視圖上改變r(jià)eact，它們只是功能性的。
通常我們?cè)陧攲拥膗i組件打印props時(shí)可以看到一堆屬性：
上圖的頂層ui組件屬性總共有18個(gè)，如果剛剛接觸react，可能對(duì)這些屬性怎么來的感到困惑，其實(shí)這些屬性來自五個(gè)地方：
組件自定義屬性1個(gè)，actionCreator返回的對(duì)象6個(gè)，reducer返回的state4個(gè)，Connect組件屬性0個(gè)，以及Router注入的屬性7個(gè)。
此文章部分內(nèi)容來自其他大牛，謝謝。
