建站
咨詢
售后
建站咨詢
新聞中心
使用Redux替代品減少Reactor應(yīng)用的樣板并減少中間商。
成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計,青河網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:青河等地區(qū)。青河做網(wǎng)站價格咨詢:18980820575
對于使用React，Vue或Angular作為前端框架的大多數(shù)應(yīng)用程序，Redux已成為流行的狀態(tài)管理解決方案。 Redux受歡迎的主要原因之一是其輕巧的大小只有2KB。
Redux的工作原理很簡單：將應(yīng)用程序的整個狀態(tài)存儲在一個中央存儲中。 所有組件都可以訪問該存儲，因此無需在組件之間傳遞參數(shù)和屬性。 Redux的主要構(gòu)建模塊是其動作，Reducer和存儲。
讓我們看一下Redux是如何工作的，以便更好地了解它與其替代方案之間的區(qū)別。
因此，簡而言之，來自組件的API調(diào)用將發(fā)送到Reducers。 它們是根據(jù)對象的舊狀態(tài)返回新狀態(tài)的函數(shù)。 新狀態(tài)存儲在存儲中，該存儲是Redux應(yīng)用程序中訪問先前狀態(tài)的中央實體。
除了保持應(yīng)用程序狀態(tài)并控制對其的訪問之外，存儲還允許更新狀態(tài)并通過訂閱來處理偵聽器的注冊和注銷。
為什么我們需要Redux的替代產(chǎn)品?
Redux及其用法聽起來很簡單，但是存在一些缺點：
- 這涉及相當(dāng)多的學(xué)習(xí)曲線。 學(xué)習(xí)Redux可能會變得更加困難，因為必須具備函數(shù)式編程知識。
- 它增加了用于簡單更改的樣板。 由于redux中的流是預(yù)定義的，因此您必須堅持下去。 在較小的應(yīng)用程序中，樣板文件的數(shù)量似乎更多。
- Redux中即使是很小的更改也會觸發(fā)DOM重組過程。 開發(fā)人員不贊成這樣做，因為它很耗時，并且會對性能產(chǎn)生不利影響。
Redux的替代品
1. MobX
MobX通過應(yīng)用反應(yīng)式編程的概念來同步模型和UI。 它僅更新UI的必需部分，而不是完全重新加載它。 MobX致力于應(yīng)用程序的面向?qū)ο蟾拍詈蛿?shù)據(jù)模型。 MobX簡化了類和存儲的文檔，其中包括應(yīng)用程序中使用的屬性和方法。 它通過在開發(fā)過程中快速交付UI對象來支持快速開發(fā)，并允許添加生命周期掛鉤" componentWillReact()"以進行響應(yīng)式更新。 這簡化了應(yīng)用程序的路由和導(dǎo)航。
> https://mobx.js.org/
由于MobX基于類，因此對象的序列化并不像JavaScript那樣簡單。 建議編寫自定義序列化和反序列化方法。 MobX要求數(shù)據(jù)通過API調(diào)用進行序列化。
建議使用MobX創(chuàng)建用于撤消/重做的自定義函數(shù)，以及數(shù)據(jù)更改的時程。 以下是MobX的主要功能：
- 它具有可伸縮性，易于使用且不允許規(guī)范化數(shù)據(jù)。
- 它映射狀態(tài)和派生之間的關(guān)系，同時保持引用完整性，從而減少錯誤的數(shù)量。
- 它通過構(gòu)建虛擬派生圖來最小化保持派生與狀態(tài)同步所需的重新計算次數(shù)，從而簡化了狀態(tài)修改。
- 它是一個JavaScript庫，因此，您可以保留JavaScript的現(xiàn)有實用程序。
- 它可以在客戶端和服務(wù)器端使用。
這是使用MobX記錄時間的示例。 它使用Observable概念來跟蹤時間：
基于其透明的反應(yīng)式編程，MobX被廣泛用作Redux的替代品。
2. Apollo GraphQL
Apollo GraphQL促進了將現(xiàn)代應(yīng)用程序連接到云的數(shù)據(jù)圖層。 React與需要從服務(wù)器獲取數(shù)據(jù)的REST API一起使用。 在現(xiàn)代和連接的系統(tǒng)中，有必要獲取大量數(shù)據(jù)。 但是，這是不可行的。 GraphQL通過允許組件聲明數(shù)據(jù)來彌合這種差距。 強大的端到端鍵入功能可提高服務(wù)器與應(yīng)用程序之間的性能。
該平臺在集中位置管理數(shù)據(jù)。 您可以簡單地連接平臺或微服務(wù)，并在這些系統(tǒng)之間連接必要的數(shù)據(jù)。 GraphQL進行數(shù)據(jù)獲取和數(shù)據(jù)轉(zhuǎn)換。 通過創(chuàng)建抽象層，它有助于使服務(wù)解耦。 GraphQL獨立于平臺和語言。
ApolloBoost入門工具包可用于集成Apollo GraphQL。 您可以使用此工具包配置客戶端。 它包括身份驗證，內(nèi)存緩存，狀態(tài)管理和錯誤處理。 Apollo GraphQL還提供了自定義Apollo Boost所需的文檔。
讓我們考慮創(chuàng)建Apollo客戶端的示例。 對于Apollo客戶端，您需要GraphQL的端點。 例如：
https：//48p1r2roz4.sse.codesandbox.io，這是阿波羅(Apollo)提供的游樂場。
接下來，將您的Apollo Boost連接到React客戶端。
連接查詢組件后，服務(wù)器將在發(fā)送數(shù)據(jù)時自動對其進行緩存。 為了自定義端點，Apollo Boost提供了構(gòu)建Apollo客戶端所需的多個軟件包。
3. 上下文API和React掛鉤
自從鉤子創(chuàng)建以來，便已與上下文API結(jié)合使用來管理狀態(tài)。
為什么要使用鉤子和上下文? 我個人更喜歡在中小型應(yīng)用程序中使用它們，因為它們使我更容易將可重復(fù)使用的組件發(fā)布到Bit(UI組件以及"智能"組件)。
未發(fā)布的組件將不會很難在其他項目中重復(fù)使用，因此請牢記這一點。
> Example: Exploring React components published to Bit.dev
我們創(chuàng)建一個UI，以在單擊按鈕時顯示令牌。 在React應(yīng)用程序中，創(chuàng)建一個名為" context"的新文件夾并定義TokenContext.js。 我們將定義令牌狀態(tài)并將其設(shè)置為" 0"。 組件將使用TokenContext.Provider訪問狀態(tài)。
現(xiàn)在，我們創(chuàng)建一個類來顯示令牌。
下一步是創(chuàng)建用于增加和減少令牌的按鈕。 讓我們創(chuàng)建TokenButton.js文件。
創(chuàng)建一個顯示類來設(shè)置UI。
現(xiàn)在，我們將創(chuàng)建一個名為TokenView.js的容器，以允許訪問userContext掛鉤。 現(xiàn)在，在視圖文件夾中創(chuàng)建一個視圖類，如下所示：
現(xiàn)在，將視圖文件導(dǎo)入App.js。
它將輸出以下結(jié)果。
4. PullState
PullState的工作方式與Redux類似，但是不支持類。 它使用鉤子進行全局狀態(tài)管理。 可以使用鉤子啟動多個存儲，并使用" useState"從狀態(tài)訪問值。 您可以創(chuàng)建一個商店，并使用" userState()"鉤子使用商店的狀態(tài)。 使用掛鉤，我們確保為組件使用所需的狀態(tài)。
這是使用PullState更改樣式屬性的示例。 首先，為您的主題創(chuàng)建一個商店。
接下來，我們將讀取狀態(tài)并在單擊按鈕時切換狀態(tài)。
5. RxJS
RxJS是一個反應(yīng)式擴展JS庫(RxJS)，它使用Observables進行異步調(diào)用。 它基于事件，并與Redux結(jié)合使用。 RxJS為應(yīng)用程序提供了更好的性能和模塊化，顯示了更好的可調(diào)試調(diào)用堆棧，并具有向后兼容性。 RxJS中最常用的概念是Observable，Scheduler和Subject。
這是RxJS的自定義鉤子的簡單片段，其中：
- 使用" useEffect"鉤子訂閱一個Observable
- 設(shè)置更改狀態(tài)
- 清理功能
結(jié)論
我們研究了Redux的一些最常用的替代方法，它們可以獨立工作或可以與React應(yīng)用程序中的redux交互。 MobX和Apollo GraphQL使用最廣泛，并且分別以性能和連接許多不同平臺的能力而著稱。
許多其他人更喜歡Reactive Extension JS(RxJS)庫，因為它使用Hooks代替Redux。 因此，最終歸結(jié)為最適合您的項目的項目。
【責(zé)任編輯： 趙寧寧 TEL：（010）68476606】
標(biāo)題名稱：2020年ReactRedux的5種替代方案
文章地址：http://m.5511xx.com/article/djejioe.html
