資訊專欄INFORMATION COLUMN
摘要：是用戶建立客戶端應用的前端架構，它通過利用一個單向的數據流補充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結構和數據流一個單向數據流是模式的核心。
Flux是Facebook用戶建立客戶端Web應用的前端架構，它通過利用一個單向的數據流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。
結構和數據流Flux應用有三個主要部分：Dispatcher調度 、存儲Store和視圖View(React 組件)，這些不應該和MVC:Model-View-Controll(模型-視圖-控制器)混淆，控制器在Flux應用中是存在的，但是他們是controller-view(控制器-視圖)，視圖通常在一個結構頂部，而這種結構是用來從存儲stroe獲得數據，然后將數據傳遞到自己的子結構們，此外，Action創建者-Dispatcher的幫助類的方法 -用于支持一個語義API，這個API是描述應用程序中所有變化的可能，通常可將它們看成是Flux更新循環的第四部分。
Flux是以單向數據流方式支持MVC，當一個用戶和React視圖交互時，視圖會將這個動作傳播到一個中央Dispatcher，一直到各種存儲，在那里保存著應用的數據和業務邏輯，這個使用React的聲明式風格的過程是非常棒的，能夠允許存儲發送更新信息，而無需指定在狀態之間如何切換視圖。(傳統方式更新狀態后，會推出一個新的視圖頁面。)
Flux最初是用于正確導出數據，比如如果我們要顯示一系列消息的未讀數字，而另外一個視圖顯示的是所有消息，其中未讀的消息會高亮顯示。這種情況使用MVC很難處理，將一個消息變為已讀狀態需要更新消息模型，然后再需要更新未讀的計數模型(將未讀模型數字減1，因為剛發生一個已讀改變)，這種依賴和級聯更新經常發生在大型MVC應用，導致一個混亂的數據流編織和不可預知的結果。
控制器被存儲反轉控制：存儲接受更新，適當地調節這些更新，而不是一致地依賴外部更新其數據，存儲之外根本不知道它是如何管理領域數據的，這有助于實現一種清晰的分離關注。存儲并沒有直接的類似setAsRead()之類的方法，而是只有一個單一方式獲取數據到其自成一體的世界中，這個方式就是回調，注冊在dispatcher中的callback。
一個單向數據流是Flux模式的核心。dispatcher 存儲和視圖是有著不同輸入輸出的獨立節點，Action動作是一個簡單對象，只是包含新的數據和一個標識符類型的屬性。
視圖也許引起新的動作Action，這個動作作為用戶交互的響應將在整個系統傳播：
所有通過dispatcher的數據流將作為一個集中式Hub，動作Action在一個action creator方法中被提供給dispatcher，這個動作通常來自于視圖中用戶的交互，dispatcher然后調用存儲已經注冊其中的回調函數，分發Action動作到所有的存儲，在它們注冊的回調函數中，存儲會響應每個和它保存的狀態有關的每個動作Action，存儲然后發射一個 change改變的事件去提醒controller-view控制器-視圖，更新到剛剛改變的新數據。controller-view監聽這些事件，然后在一個事件處理器中從存儲中獲取數據，controller-view調用它們自己的"setState()"方法，這會觸發視圖的重新渲染，包括DOM組件樹中所有更新。
這個結構允許我們能夠以比較理性的方式編程，這有點類似functional reactive programming, or 或 data-flow programming 數據流編程或 flow-based programming。
通過應用的數據流是一個方向，沒有兩邊綁定(two-way bingding：Angular.js有此方式)，應用狀態在存儲中維護，允許應用不同部分保持解耦，在存儲之間發生依賴的地方，它們能夠保持嚴格的層次關系（設計原則：盡量松耦合，無法回避的就變成樹形層次結構），同步管理由dispatcher負責。而two-way綁定會導致級聯更新，當一個對象改變導致另外對象改變，接著會觸發更多的更新，當應用規模增長時，這些級聯更新會使得預期響應用戶交互的結果變得困難，當更新只會在一個輪回中發生改變數據時，整個系統就變得可預期。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105569.html
摘要：作為大型應用狀態管理最常用的工具。它是一個應用數據流框架，與框架類似。這是觸發變化的惟一途徑。在這個函數內部，被調用，其作用是監測是的。否則的話，認為只是一個普通的，將通過也就是進一步分發。到此源碼的主要部分學習結束。 Redux作為大型React應用狀態管理最常用的工具。它是一個應用數據流框架，與Flux框架類似。它是零依賴的，可以配合其他框架或者類庫一起使用。雖然在平時的工作中很多...
摘要：學習之道簡體中文版通往實戰大師之旅掌握最簡單，且最實用的教程。前言學習之道這本書使用路線圖中的精華部分用于傳授，并將其融入一個獨具吸引力的真實世界的具體代碼實現。完美展現了的優雅。膜拜的學習之道是必讀的一本書。 《React 學習之道》The Road to learn React (簡體中文版) 通往 React 實戰大師之旅：掌握 React 最簡單，且最實用的教程。 showIm...
摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...
摘要：增強除了解決復用問題，高階的另一個重要作用就是對原始的進行增強。就是典型的利用高階來增強的例子，它主要作用是使任意變成可以執行撤銷和重做的全新。 在Redux架構中，reducer是一個純函數，它的職責是根據previousState和action計算出新的state。在復雜應用中，Redux提供的combineReducers讓我們可以把頂層的reducer拆分成多個小的reduce...
摘要：原文地址由于只涉及層的處理，所以構建大型應用應該搭配一個框架模式才能使后期維護成本相對較小正是官方給出的應用架構，他推崇一種單向的數據流動模式，看下圖感受下整個流程是用戶與層交互，觸發使用進行分發觸發回調進行更新更新觸發層事件層收到信號進 原文地址：https://gmiam.com/post/react-... 由于 React 只涉及 UI 層的處理，所以構建大型應用應該搭配一個框...
閱讀 2781·2023-04-25 14:41
閱讀 2375·2021-11-23 09:51
閱讀 3674·2021-11-17 17:08
閱讀 1667·2021-10-18 13:31
閱讀 5528·2021-09-22 15:27
閱讀 910·2019-08-30 15:54
閱讀 2222·2019-08-30 13:16
閱讀 728·2019-08-29 17:04
