React學(xué)習(xí)之認(rèn)識(shí)Flux架構(gòu)模式

EasonTyler 發(fā)布于2019-08-23 18:37 / 489人閱讀

摘要：是用戶建立客戶端應(yīng)用的前端架構(gòu)，它通過利用一個(gè)單向的數(shù)據(jù)流補(bǔ)充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結(jié)構(gòu)和數(shù)據(jù)流一個(gè)單向數(shù)據(jù)流是模式的核心。

Flux是Facebook用戶建立客戶端Web應(yīng)用的前端架構(gòu)，它通過利用一個(gè)單向的數(shù)據(jù)流補(bǔ)充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。

Flux應(yīng)用有三個(gè)主要部分：Dispatcher調(diào)度 、存儲(chǔ)Store和視圖View(React 組件)，這些不應(yīng)該和MVC:Model-View-Controll(模型-視圖-控制器)混淆，控制器在Flux應(yīng)用中是存在的，但是他們是controller-view(控制器-視圖)，視圖通常在一個(gè)結(jié)構(gòu)頂部，而這種結(jié)構(gòu)是用來從存儲(chǔ)stroe獲得數(shù)據(jù)，然后將數(shù)據(jù)傳遞到自己的子結(jié)構(gòu)們，此外，Action創(chuàng)建者-Dispatcher的幫助類的方法 -用于支持一個(gè)語義API，這個(gè)API是描述應(yīng)用程序中所有變化的可能，通常可將它們看成是Flux更新循環(huán)的第四部分。
Flux是以單向數(shù)據(jù)流方式支持MVC，當(dāng)一個(gè)用戶和React視圖交互時(shí)，視圖會(huì)將這個(gè)動(dòng)作傳播到一個(gè)中央Dispatcher，一直到各種存儲(chǔ)，在那里保存著應(yīng)用的數(shù)據(jù)和業(yè)務(wù)邏輯，這個(gè)使用React的聲明式風(fēng)格的過程是非常棒的，能夠允許存儲(chǔ)發(fā)送更新信息，而無需指定在狀態(tài)之間如何切換視圖。(傳統(tǒng)方式更新狀態(tài)后，會(huì)推出一個(gè)新的視圖頁(yè)面。)
Flux最初是用于正確導(dǎo)出數(shù)據(jù)，比如如果我們要顯示一系列消息的未讀數(shù)字，而另外一個(gè)視圖顯示的是所有消息，其中未讀的消息會(huì)高亮顯示。這種情況使用MVC很難處理，將一個(gè)消息變?yōu)橐炎x狀態(tài)需要更新消息模型，然后再需要更新未讀的計(jì)數(shù)模型(將未讀模型數(shù)字減1，因?yàn)閯偘l(fā)生一個(gè)已讀改變)，這種依賴和級(jí)聯(lián)更新經(jīng)常發(fā)生在大型MVC應(yīng)用，導(dǎo)致一個(gè)混亂的數(shù)據(jù)流編織和不可預(yù)知的結(jié)果。
控制器被存儲(chǔ)反轉(zhuǎn)控制：存儲(chǔ)接受更新，適當(dāng)?shù)卣{(diào)節(jié)這些更新，而不是一致地依賴外部更新其數(shù)據(jù)，存儲(chǔ)之外根本不知道它是如何管理領(lǐng)域數(shù)據(jù)的，這有助于實(shí)現(xiàn)一種清晰的分離關(guān)注。存儲(chǔ)并沒有直接的類似setAsRead()之類的方法，而是只有一個(gè)單一方式獲取數(shù)據(jù)到其自成一體的世界中，這個(gè)方式就是回調(diào)，注冊(cè)在dispatcher中的callback。

結(jié)構(gòu)和數(shù)據(jù)流


一個(gè)單向數(shù)據(jù)流是Flux模式的核心。dispatcher 存儲(chǔ)和視圖是有著不同輸入輸出的獨(dú)立節(jié)點(diǎn)，Action動(dòng)作是一個(gè)簡(jiǎn)單對(duì)象，只是包含新的數(shù)據(jù)和一個(gè)標(biāo)識(shí)符類型的屬性。
視圖也許引起新的動(dòng)作Action，這個(gè)動(dòng)作作為用戶交互的響應(yīng)將在整個(gè)系統(tǒng)傳播：

所有通過dispatcher的數(shù)據(jù)流將作為一個(gè)集中式Hub，動(dòng)作Action在一個(gè)action creator方法中被提供給dispatcher，這個(gè)動(dòng)作通常來自于視圖中用戶的交互，dispatcher然后調(diào)用存儲(chǔ)已經(jīng)注冊(cè)其中的回調(diào)函數(shù)，分發(fā)Action動(dòng)作到所有的存儲(chǔ)，在它們注冊(cè)的回調(diào)函數(shù)中，存儲(chǔ)會(huì)響應(yīng)每個(gè)和它保存的狀態(tài)有關(guān)的每個(gè)動(dòng)作Action，存儲(chǔ)然后發(fā)射一個(gè) change改變的事件去提醒controller-view控制器-視圖，更新到剛剛改變的新數(shù)據(jù)。controller-view監(jiān)聽這些事件，然后在一個(gè)事件處理器中從存儲(chǔ)中獲取數(shù)據(jù)，controller-view調(diào)用它們自己的"setState()"方法，這會(huì)觸發(fā)視圖的重新渲染，包括DOM組件樹中所有更新。

這個(gè)結(jié)構(gòu)允許我們能夠以比較理性的方式編程，這有點(diǎn)類似functional reactive programming, or 或 data-flow programming 數(shù)據(jù)流編程或 flow-based programming。
通過應(yīng)用的數(shù)據(jù)流是一個(gè)方向，沒有兩邊綁定(two-way bingding：Angular.js有此方式)，應(yīng)用狀態(tài)在存儲(chǔ)中維護(hù)，允許應(yīng)用不同部分保持解耦，在存儲(chǔ)之間發(fā)生依賴的地方，它們能夠保持嚴(yán)格的層次關(guān)系（設(shè)計(jì)原則：盡量松耦合，無法回避的就變成樹形層次結(jié)構(gòu)），同步管理由dispatcher負(fù)責(zé)。而two-way綁定會(huì)導(dǎo)致級(jí)聯(lián)更新，當(dāng)一個(gè)對(duì)象改變導(dǎo)致另外對(duì)象改變，接著會(huì)觸發(fā)更多的更新，當(dāng)應(yīng)用規(guī)模增長(zhǎng)時(shí)，這些級(jí)聯(lián)更新會(huì)使得預(yù)期響應(yīng)用戶交互的結(jié)果變得困難，當(dāng)更新只會(huì)在一個(gè)輪回中發(fā)生改變數(shù)據(jù)時(shí)，整個(gè)系統(tǒng)就變得可預(yù)期。