資訊專欄INFORMATION COLUMN
摘要：在方法中處理數(shù)據(jù)有三不同的角色派發(fā)器儲存視圖層我們的組件的主要思想是有一個單一源儲存他們只能通過觸發(fā)更新。這些操作負責調(diào)用派發(fā)器可以訂閱更改并相應(yīng)地更新自己的數(shù)據(jù)。與不同不使用派發(fā)器而是使用純函數(shù)來定義數(shù)據(jù)變異函數(shù)。
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3812
原文：https://www.fullstackreact.com/30-days-of-react/day-18/
處理客戶端應(yīng)用中的數(shù)據(jù)是一項復(fù)雜的任務(wù)。今天我們正在研究一種處理Facebook提出的復(fù)雜數(shù)據(jù)的方法，稱為 Flux 體系結(jié)構(gòu)。
隨著應(yīng)用變得越來越復(fù)雜, 我們需要更好的數(shù)據(jù)處理方法。有了更多的數(shù)據(jù), 我們將有更多的記錄。
我們的代碼需要使用新功能處理更多的數(shù)據(jù)和應(yīng)用狀態(tài)。從異步服務(wù)器響應(yīng)到本地生成的、不同步的數(shù)據(jù), 我們不僅要跟蹤這些數(shù)據(jù), 還要將其與視圖保持正常的聯(lián)系。
認識到對數(shù)據(jù)管理的需求, facebook 團隊發(fā)布了一種處理數(shù)據(jù)的模式, 稱為 Flux。
今天, 我們將看一下Flux體系結(jié)構(gòu), 它是什么以及它存在的原因。
什么是fluxFlux是一種用于管理數(shù)據(jù)如何通過React應(yīng)用流動的模式。正如我們所看到的, 使用React組件的首選方法是通過從一個父組件向它的子組件傳遞數(shù)據(jù)。Flux模式使此模型成為處理數(shù)據(jù)的默認方法。
在Flux方法中處理數(shù)據(jù)有三不同的角色:
Dispatcher 派發(fā)器
Stores 儲存
Views (our components) 視圖層(我們的組件)
Flux的主要思想是, 有一個單一源 (Stores 儲存), 他們只能通過觸發(fā) actions 更新。這些操作負責調(diào)用派發(fā)器, Stores可以 訂閱 更改并相應(yīng)地更新自己的數(shù)據(jù)。
When a dispatch has been triggered, and the store updates, it will emit a change event which the views can rerender accordingly.當發(fā)送已觸發(fā), 并且存儲更新時, 它將發(fā)出一個更改事件, 視圖可以據(jù)此 重新渲染。
這似乎沒必要這么復(fù)雜, 但結(jié)構(gòu)使它難以置信地容易推理, 我們的數(shù)據(jù)來自哪里, 導(dǎo)致它的變化, 如何改變, 讓我們跟蹤特定的用戶流, 等等。
Flux 背后的關(guān)鍵理念是:
數(shù)據(jù)流向一個方向, 并完全保存在Stores中。
實現(xiàn)雖然我們可以創(chuàng)建我們自己的flux實現(xiàn), 許多已經(jīng)創(chuàng)建了一些夢幻般的庫, 我們可以挑選。
Facebook"s flux
alt
nuclear-js
Fluxible
reflux
Fluxxor
flux-react
更多... 許多許多許多
插件我們深入討論這個材料關(guān)于Flux, 使用庫, 甚至實現(xiàn)我們自己的版本的Flux, 最適合我們。
查看 fullstackreact.com
它可能是相當激烈的嘗試為我們的應(yīng)用選擇 正確 選項。每個人因為不同的原因都有自己的特點, 是偉大的。然而, 在很大程度上, React社區(qū)已經(jīng)集中在使用另一種稱為Redux的flux工具。
ReduxRedux是一個小的庫, 它的設(shè)計靈感來自flux模式, 但本身不是一個純粹的flux實現(xiàn)。它提供了相同的一般原則, 圍繞如何更新我們的應(yīng)用中的數(shù)據(jù), 但以略微不同的方式。
與Flux不同, Redux不使用派發(fā)器, 而是使用純函數(shù)來定義數(shù)據(jù)變異函數(shù)。它仍然使用Store（儲存）和Action（動作）, 可以直接地被栓到React組件。
3 主要原則的Redux我們將牢記在我們的應(yīng)用中實現(xiàn)Redux是:
使用純函數(shù)進行更新 (in reducers 在歸約器中)
state 是只讀屬性
state是唯一的來源 (一個Redux的應(yīng)用只有一個Stores 儲存 )
Redux和Flux的一個大的區(qū)別是中間件的概念。Redux增加了中間件的想法, 我們可以使用它來操作我們接收到的操作, 無論是進入還是從我們的應(yīng)用中。幾天后我們再詳細討論。
在任何情況下, 這是很多介紹的flux模式。明天, 我們將實際開始移動我們的數(shù)據(jù)使用Redux。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84724.html
摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。為了獲得更多的性能和簡單性，同樣允許我們使用正常的函數(shù)創(chuàng)建純粹的，無狀態(tài)的組件。在中，功能組件被稱為一個參數(shù)的類似于構(gòu)造函數(shù)類，它們是它所調(diào)用的，以及組件樹的當前。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...
摘要：歸約器函數(shù)負責返回應(yīng)用當前全局狀態(tài)的表示形式。當我們在存儲上發(fā)送操作時將使用應(yīng)用的當前狀態(tài)和導(dǎo)致狀態(tài)更新的操作來調(diào)用此歸約器函數(shù)。回到我們的歸約器我們可以檢查的動作類型并采取適當?shù)牟襟E創(chuàng)建下一個狀態(tài)。我們將處理動作創(chuàng)造者中歸約器的副作用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3811原文：https://www.ful...
摘要：我們將討論三種不同的軟件測試范例單元測試功能測試和集成測試。在中單元測試通常不需要瀏覽器可以快速運行不需要寫入斷言本身通常是簡單而簡潔的。集成測試最后我們將研究的最后一種測試是集成測試。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3809原文：https://www.fullstackreact.com/30-days-of...
摘要：使用承諾對象使我們有機會將異步操作的最終成功或失敗關(guān)聯(lián)到功能無論出于何種原因。例如在上面的示例中函數(shù)解析為值在成功完成時并在返回值這是另一個承諾上調(diào)用函數(shù)依此類推等等。這意味著我們只能返回一個承諾一次。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3814原文：https://www.fullstackreact.com/30...
閱讀 594·2021-11-18 13:12
閱讀 1314·2021-11-15 11:39
閱讀 2473·2021-09-23 11:22
閱讀 6194·2021-09-22 15:15
閱讀 3655·2021-09-02 09:54
閱讀 2310·2019-08-30 11:10
閱讀 3245·2019-08-29 14:13
閱讀 2913·2019-08-29 12:49
