成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React學習之認識Flux架構(gòu)模式

EasonTyler / 487人閱讀

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

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

Flux應(yīng)用有三個主要部分：Dispatcher調(diào)度 、存儲Store和視圖View(React 組件)，這些不應(yīng)該和MVC:Model-View-Controll(模型-視圖-控制器)混淆，控制器在Flux應(yīng)用中是存在的，但是他們是controller-view(控制器-視圖)，視圖通常在一個結(jié)構(gòu)頂部，而這種結(jié)構(gòu)是用來從存儲stroe獲得數(shù)據(jù)，然后將數(shù)據(jù)傳遞到自己的子結(jié)構(gòu)們，此外，Action創(chuàng)建者-Dispatcher的幫助類的方法 -用于支持一個語義API，這個API是描述應(yīng)用程序中所有變化的可能，通?？蓪⑺鼈兛闯墒荈lux更新循環(huán)的第四部分。


Flux是以單向數(shù)據(jù)流方式支持MVC，當一個用戶和React視圖交互時，視圖會將這個動作傳播到一個中央Dispatcher，一直到各種存儲，在那里保存著應(yīng)用的數(shù)據(jù)和業(yè)務(wù)邏輯，這個使用React的聲明式風格的過程是非常棒的，能夠允許存儲發(fā)送更新信息，而無需指定在狀態(tài)之間如何切換視圖。(傳統(tǒng)方式更新狀態(tài)后，會推出一個新的視圖頁面。)


Flux最初是用于正確導(dǎo)出數(shù)據(jù)，比如如果我們要顯示一系列消息的未讀數(shù)字，而另外一個視圖顯示的是所有消息，其中未讀的消息會高亮顯示。這種情況使用MVC很難處理，將一個消息變?yōu)橐炎x狀態(tài)需要更新消息模型，然后再需要更新未讀的計數(shù)模型(將未讀模型數(shù)字減1，因為剛發(fā)生一個已讀改變)，這種依賴和級聯(lián)更新經(jīng)常發(fā)生在大型MVC應(yīng)用，導(dǎo)致一個混亂的數(shù)據(jù)流編織和不可預(yù)知的結(jié)果。


控制器被存儲反轉(zhuǎn)控制：存儲接受更新，適當?shù)卣{(diào)節(jié)這些更新，而不是一致地依賴外部更新其數(shù)據(jù)，存儲之外根本不知道它是如何管理領(lǐng)域數(shù)據(jù)的，這有助于實現(xiàn)一種清晰的分離關(guān)注。存儲并沒有直接的類似setAsRead()之類的方法，而是只有一個單一方式獲取數(shù)據(jù)到其自成一體的世界中，這個方式就是回調(diào)，注冊在dispatcher中的callback。
結(jié)構(gòu)和數(shù)據(jù)流 


一個單向數(shù)據(jù)流是Flux模式的核心。dispatcher 存儲和視圖是有著不同輸入輸出的獨立節(jié)點，Action動作是一個簡單對象，只是包含新的數(shù)據(jù)和一個標識符類型的屬性。


視圖也許引起新的動作Action，這個動作作為用戶交互的響應(yīng)將在整個系統(tǒng)傳播：



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



這個結(jié)構(gòu)允許我們能夠以比較理性的方式編程，這有點類似functional reactive programming, or 或 data-flow programming 數(shù)據(jù)流編程或 flow-based programming。


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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105569.html

相關(guān)文章

  • React學習之深入Redux應(yīng)用框架

    摘要：作為大型應(yīng)用狀態(tài)管理最常用的工具。它是一個應(yīng)用數(shù)據(jù)流框架，與框架類似。這是觸發(fā)變化的惟一途徑。在這個函數(shù)內(nèi)部，被調(diào)用，其作用是監(jiān)測是的。否則的話，認為只是一個普通的，將通過也就是進一步分發(fā)。到此源碼的主要部分學習結(jié)束。 Redux作為大型React應(yīng)用狀態(tài)管理最常用的工具。它是一個應(yīng)用數(shù)據(jù)流框架，與Flux框架類似。它是零依賴的，可以配合其他框架或者類庫一起使用。雖然在平時的工作中很多...

    張漢慶 評論0 收藏0

  • 【搶先領(lǐng)】《React 學習之道》我們翻譯了一本最簡單，且最實用的 React 實戰(zhàn)教程……

    摘要：學習之道簡體中文版通往實戰(zhàn)大師之旅掌握最簡單，且最實用的教程。前言學習之道這本書使用路線圖中的精華部分用于傳授，并將其融入一個獨具吸引力的真實世界的具體代碼實現(xiàn)。完美展現(xiàn)了的優(yōu)雅。膜拜的學習之道是必讀的一本書。 《React 學習之道》The Road to learn React (簡體中文版) 通往 React 實戰(zhàn)大師之旅：掌握 React 最簡單，且最實用的教程。 showIm...

    oneasp 評論0 收藏0

  • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

    摘要：一般來說，聲明式編程關(guān)注于發(fā)生了啥，而命令式則同時關(guān)注與咋發(fā)生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

    roadtogeek 評論0 收藏0

  • React學習之Redux高階運用

    摘要：增強除了解決復(fù)用問題，高階的另一個重要作用就是對原始的進行增強。就是典型的利用高階來增強的例子，它主要作用是使任意變成可以執(zhí)行撤銷和重做的全新。 在Redux架構(gòu)中，reducer是一個純函數(shù)，它的職責是根據(jù)previousState和action計算出新的state。在復(fù)雜應(yīng)用中，Redux提供的combineReducers讓我們可以把頂層的reducer拆分成多個小的reduce...

    supernavy 評論0 收藏0

  • React系列之 Flux架構(gòu)模式

    摘要：原文地址由于只涉及層的處理，所以構(gòu)建大型應(yīng)用應(yīng)該搭配一個框架模式才能使后期維護成本相對較小正是官方給出的應(yīng)用架構(gòu)，他推崇一種單向的數(shù)據(jù)流動模式，看下圖感受下整個流程是用戶與層交互，觸發(fā)使用進行分發(fā)觸發(fā)回調(diào)進行更新更新觸發(fā)層事件層收到信號進 原文地址：https://gmiam.com/post/react-... 由于 React 只涉及 UI 層的處理，所以構(gòu)建大型應(yīng)用應(yīng)該搭配一個框...

    whjin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<