?? React 狀態(tài)管理使企業(yè)家能夠構(gòu)建可擴(kuò)展、可維護(hù)和高性能的企業(yè)應(yīng)用程序。
?? 在 React js 應(yīng)用程序中有多種有效管理狀態(tài)的方法：使用組件狀態(tài)、上下文 API、反應(yīng)和自定義鉤子、渲染道具、高階組件和狀態(tài)管理 React 庫。
?? 這些庫是添加到 React 前端的預(yù)構(gòu)建代碼包，以便可以輕松管理組件的狀態(tài)。
?? React 組件的狀態(tài)有很多種，比如local, global, fetch, UI state, server-caching, mutable, complex等等），各有各的精髓。

為什么 React 狀態(tài)管理對企業(yè)應(yīng)用程序至關(guān)重要？

企業(yè)主最關(guān)鍵和最具挑戰(zhàn)性的選擇是構(gòu)建易于維護(hù)、可重用、提供高性能的企業(yè)應(yīng)用程序，最重要的是應(yīng)用程序必須具有良好的可擴(kuò)展性.

React 狀態(tài)管理是 Web 開發(fā)領(lǐng)域中一個引人注目的話題，當(dāng)您擁有 React.js 企業(yè)應(yīng)用程序時，深入了解它至關(guān)重要。我們知道商業(yè)應(yīng)用程序開發(fā)的痛點(diǎn)，讓我們看看狀態(tài)管理 React 庫如何使您的企業(yè)應(yīng)用程序符合您的業(yè)務(wù)目標(biāo)。

表現(xiàn)

由于重新渲染，React.js 應(yīng)用程序可能難以加載前端。使用React 狀態(tài)管理，您可以優(yōu)化狀態(tài)更新，從而提高應(yīng)用程序性能和效率。

維護(hù)

React 應(yīng)用程序中的狀態(tài)管理使您能夠模塊化和封裝狀態(tài)更新。因此，您可以輕松維護(hù)和調(diào)試代碼庫。這種可維護(hù)性還確保新開發(fā)團(tuán)隊(duì)的成員能夠快速適應(yīng)和理解應(yīng)用程序的狀態(tài)。

可重用性

很難在 React 應(yīng)用程序的各個組件之間重用狀態(tài)，但是，使用像 Redux 和 MobX 這樣的 React 狀態(tài)管理庫，您可以輕松地在應(yīng)用程序的所有組件之間共享狀態(tài)。

可擴(kuò)展性

管理 React 狀態(tài)的糟糕策略會導(dǎo)致性能下降和錯誤，從而隨著應(yīng)用程序的大小和復(fù)雜性的增加而難以管理狀態(tài)。React 提供了精心設(shè)計(jì)的狀態(tài)管理策略，以確保您可以完美地擴(kuò)展您的 React js 應(yīng)用程序。

這就是 State Management React 是 CTO 和產(chǎn)品所有者的明智解決方案的原因。

需要一個可以像專業(yè)人士一樣處理狀態(tài)管理的 React 開發(fā)人員嗎？
讓我們通過頂級狀態(tài)管理讓您的項(xiàng)目栩栩如生。從我們這里雇用對 React 狀態(tài)管理有深入了解的React 開發(fā)人員。

React 中狀態(tài)管理的不同方法

當(dāng)您擁有一個提供速度、靈活性、豐富的 UI 等等的 React Js 應(yīng)用程序時，您會希望在應(yīng)用程序中利用組件的狀態(tài)。

找出實(shí)現(xiàn) React 狀態(tài)管理的不同方法：

組件狀態(tài)

每個 React 組件都有其內(nèi)部狀態(tài)，可用于存儲和管理特定于該組件的數(shù)據(jù)。此狀態(tài)使用 setState 方法進(jìn)行管理，該方法更新組件的狀態(tài)并觸發(fā)重新渲染。

上下文API

Context API 是一種內(nèi)置的方式，可以在 React 中的組件之間共享狀態(tài)，而無需通過 props 將數(shù)據(jù)向下傳遞到組件樹。當(dāng)您需要在組件樹中未直接連接的組件之間共享狀態(tài)時，這可能是使用組件狀態(tài)的有用替代方法。

反應(yīng)掛鉤

React Hooks是一種向功能組件添加狀態(tài)和其他 React 特性的方法。useState 和 useReducer 掛鉤可用于管理本地組件狀態(tài)，而 useContext 掛鉤可用于從 Context API 訪問共享狀態(tài)。

自定義掛鉤

自定義掛鉤是一種將狀態(tài)和邏輯提取到多個組件可以使用的可重用函數(shù)中的方法。對于在組件樹中嵌套不深的組件之間共享狀態(tài)和邏輯來說，這是一個不錯的選擇。

高階組件 (HOC)

高階組件是一種通過將組件與提供狀態(tài)的另一個組件包裝在一起來共享組件之間狀態(tài)的方法。對于在組件樹中沒有深度嵌套的組件之間共享狀態(tài)，這可能是一個很好的選擇。

渲染道具

Render props 是一種在組件之間共享狀態(tài)的模式，它通過將函數(shù)作為 prop 傳遞來渲染需要狀態(tài)的組件。對于在組件樹中嵌套不深的組件之間共享狀態(tài)，這是一個不錯的選擇。

除了上述之外，還有許多狀態(tài)管理 React 庫可供使用。讓我們進(jìn)一步了解它們。

React 狀態(tài)管理教程

讓我們開始實(shí)踐，我們將學(xué)習(xí)如何在 React 應(yīng)用程序中管理狀態(tài)。

目標(biāo)：使用內(nèi)置狀態(tài)管理功能的 React 中的簡單增量/減量應(yīng)用程序。

第 1 步：創(chuàng)建一個新的 React 項(xiàng)目

npx create-react-app 反應(yīng)用程序

現(xiàn)在，在創(chuàng)建項(xiàng)目時，導(dǎo)航到 src 目錄并創(chuàng)建一個名為“counter.js”的新文件。

第 2 步：定義主函數(shù)

首先，讓我們導(dǎo)入 React 并創(chuàng)建一個名為 Counter 的新功能組件。在組件內(nèi)部，我們將使用 useState 掛鉤創(chuàng)建一個名為 count 的新狀態(tài)變量，并將其設(shè)置為初始值 0。我們還將創(chuàng)建兩個名為 increment 和 decrement 的函數(shù)，用于更新 count 變量：

從“反應(yīng)”中導(dǎo)入反應(yīng)，{useState}；功能計(jì)數(shù)器（）{
  const [count, setCount] = useState(0);
  const 增量 = () => {
    設(shè)置計(jì)數(shù)（計(jì)數(shù) + 1）；
  };
  const 減量 = () => {
    設(shè)置計(jì)數(shù)（計(jì)數(shù) - 1）；
  };
  返回 （
    <分區(qū)>
      <h1>{計(jì)數(shù)}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );}導(dǎo)出默認(rèn)計(jì)數(shù)器；

在上面的代碼中，我們使用 useState 掛鉤創(chuàng)建一個名為 count 的新狀態(tài)變量和一個名為 setCount 的函數(shù)，該函數(shù)將用于更新 count 變量。我們將 count 的初始值設(shè)置為 0。

我們還創(chuàng)建了兩個名為 increment 和 decrement 的函數(shù)，當(dāng)用戶分別單擊“+”和“-”按鈕時將調(diào)用這兩個函數(shù)。在這些函數(shù)中，我們調(diào)用 setCount 函數(shù)通過加 1 或減 1 來更新 count 的值。

最后，我們返回一個包含當(dāng)前計(jì)數(shù)值的 div 元素，以及兩個在單擊時調(diào)用遞增和遞減函數(shù)的按鈕。

第 3 步：在主 JS 文件中渲染“計(jì)數(shù)器”

現(xiàn)在，讓我們轉(zhuǎn)到 App.js 文件并渲染 Counter 組件：

從“反應(yīng)”導(dǎo)入反應(yīng)；從'./Counter'導(dǎo)入計(jì)數(shù)器；功能應(yīng)用程序（）{
  返回 （
    <分區(qū)>
      <計(jì)數(shù)器/>
    </div>
  );}導(dǎo)出默認(rèn)應(yīng)用程序；

您現(xiàn)在應(yīng)該能夠通過運(yùn)行 npm start 來運(yùn)行該應(yīng)用程序，并在您的瀏覽器中看到計(jì)數(shù)器應(yīng)用程序。

這是一個在 React 應(yīng)用程序中處理和管理狀態(tài)的簡單示例。

使用我們先進(jìn)的狀態(tài)管理解決方案最大限度地發(fā)揮您的 React 應(yīng)用程序的潛力
聯(lián)系我們最好的Reactjs 開發(fā)公司。從簡單的狀態(tài)管理到復(fù)雜的數(shù)據(jù)流，我們隨時幫助您釋放 React 應(yīng)用程序的全部潛力。

14 個頂級 React 狀態(tài)管理庫

以下是為管理 React js 應(yīng)用程序中的狀態(tài)而預(yù)先構(gòu)建的流行庫，以及它們的優(yōu)缺點(diǎn)。

1. 終極版

Redux是一個流行的庫，用于使用 React、Angular 和其他框架構(gòu)建 Web 應(yīng)用程序。它提供了一個集中存儲來管理應(yīng)用程序的狀態(tài)和一組用于可預(yù)測地修改該狀態(tài)的規(guī)則。

優(yōu)點(diǎn)：可預(yù)測的 React 狀態(tài)管理、可調(diào)試、健壯的生態(tài)系統(tǒng)、時間旅行調(diào)試以及對復(fù)雜狀態(tài)變化的高效處理。

缺點(diǎn)：設(shè)置和配置可能很復(fù)雜，依賴于樣板代碼，不適合簡單的應(yīng)用程序，并且需要了解函數(shù)式編程概念。

2. 移動X

MobX 是一個 React 狀態(tài)管理庫，它使用 observables 來跟蹤狀態(tài)變化，并在這些 observables 發(fā)生變化時自動重新渲染組件。

優(yōu)點(diǎn)：使用簡單直觀，樣板最少，快速高效，性能優(yōu)異，與React兼容性強(qiáng)。

缺點(diǎn)：缺少更復(fù)雜庫的某些功能，更難調(diào)試，并且生態(tài)系統(tǒng)更小。

3.后坐力

Recoil 是 Facebook 為 React 應(yīng)用程序開發(fā)的用于管理狀態(tài)的庫。它提供了一個集中式存儲來管理應(yīng)用程序的狀態(tài)，并提供了一組用于訪問和更新該狀態(tài)的掛鉤。

優(yōu)點(diǎn)：簡單、靈活、易學(xué)易用、性能突出。

缺點(diǎn)：一個相對較新的圖書館，正在開發(fā)中，社區(qū)不成熟，但正在成長。

4.喬泰

Pedro Nauck 的 Jotai 使用 atoms 和 setters 來管理應(yīng)用程序的狀態(tài)，專注于簡單性和性能。

優(yōu)點(diǎn)：簡單輕便，易于使用，與 React 配合良好，學(xué)習(xí)曲線小。

缺點(diǎn)：一個相對較新的庫，仍在積極開發(fā)中，生態(tài)系統(tǒng)不如其他庫成熟。

5. 堅(jiān)持

Guillaume Salva 為 React 提供了 Zustand 狀態(tài)管理庫，它使用簡化的類似 Redux 的方法來管理應(yīng)用程序的狀態(tài)。

優(yōu)點(diǎn)：簡單易用，樣板代碼最少，可提高性能并具有較小的包大小。

缺點(diǎn)：不建議用于復(fù)雜的狀態(tài)管理處理，并且生態(tài)系統(tǒng)仍在增長。

6. 復(fù)賽

Shawn McKay 為 React 應(yīng)用程序構(gòu)建了這個基于 Redux 的庫。它提供了一個用于創(chuàng)建 Redux 存儲和縮減器的簡化 API，從而減少了對樣板文件的依賴并提高了開發(fā)人員的工作效率。

優(yōu)點(diǎn)：易于使用和理解，使用比傳統(tǒng) Redux 更少的樣板代碼，并提供出色的性能。

缺點(diǎn)：仍然需要很好地理解 Redux 概念，可能不適合大型項(xiàng)目，并且生態(tài)系統(tǒng)比其他選項(xiàng)小。

7.掛鉤狀態(tài)

Hookstate 是一個相對較新的 React 狀態(tài)管理庫，由 Rafael Wieland 開發(fā)。Hookstate 的核心是使用一種簡化的方法來管理應(yīng)用程序的狀態(tài)，強(qiáng)調(diào)性能和開發(fā)人員的生產(chǎn)力。

優(yōu)點(diǎn)：簡單易用，樣板最少，性能高。

缺點(diǎn)：可用于需要最少 React 狀態(tài)管理的場景，并且生態(tài)系統(tǒng)較小。

8.瓦爾蒂奧

Poimandres 提出了 Valtio 庫，它使用簡約和反應(yīng)式的方法來管理應(yīng)用程序的狀態(tài)，重點(diǎn)是性能和開發(fā)人員的生產(chǎn)力。

優(yōu)點(diǎn)：簡單易用，樣板最少，性能出色。

缺點(diǎn)：只能用于簡單的狀態(tài)管理案例，并且生態(tài)系統(tǒng)比其他選項(xiàng)小。

9.X狀態(tài)

David Khourshid 開發(fā)了 XState 庫，它使用有限狀態(tài)機(jī)的概念來管理應(yīng)用程序的狀態(tài)，側(cè)重于可預(yù)測性、模塊化和可測試性。

優(yōu)點(diǎn)：非常適合管理復(fù)雜的狀態(tài)轉(zhuǎn)換，特別注重聲明式編程和強(qiáng)類型。

缺點(diǎn)：可能需要更多時間來學(xué)習(xí)和理解，可能不適合管理 React 狀態(tài)的更簡單場景。

10.未說明

Unstated 是一個輕量級庫，它使用 React 上下文 API 在組件之間共享狀態(tài)。它是 Redux 和 MobX 的更簡單替代品，可用于更小或更簡單的應(yīng)用程序。

優(yōu)點(diǎn)：簡單易用，樣板最少，性能好。

缺點(diǎn)：不建議用于大型項(xiàng)目，并且可能存在潛在的性能問題，因?yàn)樗蕾囉?React 中的 Context API，這在某些情況下很慢。生態(tài)系統(tǒng)有限，學(xué)習(xí)曲線長。

11.反應(yīng)路由器

Ryan Florence 和 Michael Jackson 為 React 應(yīng)用程序中的路由開發(fā)了這個庫。React Router 提供了一種聲明式的方式來處理 React 應(yīng)用程序中的路由，專注于簡單性、靈活性和性能。

優(yōu)點(diǎn)：強(qiáng)大而靈活的路由選項(xiàng)和龐大的生態(tài)系統(tǒng)。

缺點(diǎn)：設(shè)置和配置可能很復(fù)雜，并且在某些情況下會導(dǎo)致性能問題。

12.反應(yīng)狀態(tài)

Adobe 開發(fā)了這個庫，它的核心是提供一組掛鉤和組件，可用于管理復(fù)雜的 UI 狀態(tài)，例如表單輸入、下拉菜單和菜單中的狀態(tài)。

優(yōu)點(diǎn)：專為創(chuàng)建可訪問的用戶界面而設(shè)計(jì)，具有良好的性能和干凈、可組合的 API。

缺點(diǎn)：不適合需要復(fù)雜狀態(tài)管理的 React 應(yīng)用程序。

13. React-powerhooks

Fabien Juif 為 React 應(yīng)用程序開發(fā)了這個可重用鉤子庫。React Powerhooks 的核心是提供一組鉤子來管理常見的 UI 狀態(tài)，例如加載、錯誤處理和表單驗(yàn)證。

優(yōu)點(diǎn)：為常見場景提供各種有用的鉤子。這些掛鉤需要最少的設(shè)置。

缺點(diǎn)：不適合需要復(fù)雜處理和管理 React 狀態(tài)的 React Js 應(yīng)用程序。

14. 反應(yīng)使用狀態(tài)更新器

Jed Watson 開發(fā)了這個庫，它提供了一個鉤子來管理 React 組件的狀態(tài)，重點(diǎn)是性能和開發(fā)人員的生產(chǎn)力。

優(yōu)點(diǎn)：提高了嚴(yán)重依賴 useState 的 React 組件的性能。

缺點(diǎn)：僅適用于某些用例。使用起來不如內(nèi)置的 useState 掛鉤直觀。

關(guān)于 ReactJs 狀態(tài)

到目前為止，我們學(xué)習(xí)、理解和討論了 ReactJs 應(yīng)用程序中組件的狀態(tài)，以及如何在 React 中處理和管理狀態(tài)?，F(xiàn)在讓我們了解核心基礎(chǔ)知識。

以下是 React 組件的不同狀態(tài)：

地方政府

本地狀態(tài)特定于單個組件，并使用 setState 方法進(jìn)行管理。它通常用于存儲特定于組件的數(shù)據(jù)，并且僅在該組件內(nèi)使用。

全局狀態(tài)

全局狀態(tài)在多個組件之間共享并管理整個應(yīng)用程序的全局?jǐn)?shù)據(jù)。它通常存儲在集中式存儲中，例如 Redux 存儲，并由組件通過存儲的狀態(tài)進(jìn)行訪問。

獲取狀態(tài)

此狀態(tài)用于管理從遠(yuǎn)程服務(wù)器或 API 獲取的數(shù)據(jù)。Fetch 狀態(tài)通常用于存儲有關(guān)獲取操作狀態(tài)的信息，例如數(shù)據(jù)是否已加載、是否存在錯誤或數(shù)據(jù)是否正在加載。

界面狀態(tài)

管理影響 UI 顯示方式的數(shù)據(jù)——與用戶界面相關(guān)的數(shù)據(jù)。UI 狀態(tài)的示例包括窗體是否可見或模式是否打開、當(dāng)前選定的選項(xiàng)卡或當(dāng)前滾動位置。

服務(wù)器端緩存狀態(tài)

將狀態(tài)存儲在服務(wù)器上，并用于緩存數(shù)據(jù)以進(jìn)行性能優(yōu)化。服務(wù)器端緩存狀態(tài)通常用于存儲不經(jīng)常更改的數(shù)據(jù)，例如有關(guān)產(chǎn)品或用戶配置文件的信息，以減少到服務(wù)器的往返次數(shù)。

可變狀態(tài)

它指的是可以隨時間變化的數(shù)據(jù)，通常使用 useState 掛鉤存儲在組件狀態(tài)中或類組件的狀態(tài)中?？勺儬顟B(tài)可以很簡單，例如字符串或數(shù)字，也可以更復(fù)雜，例如數(shù)組或?qū)ο?。?dāng)狀態(tài)更新時，React 將重新渲染組件和任何依賴于該狀態(tài)的子組件。

復(fù)雜狀態(tài)

指從其他數(shù)據(jù)派生的數(shù)據(jù)，通常不直接可變。復(fù)雜狀態(tài)不是存儲在狀態(tài)中，而是使用組件的 props 或其他狀態(tài)變量來計(jì)算。這方面的示例包括計(jì)算結(jié)果、數(shù)組的過濾或排序版本或動畫的當(dāng)前狀態(tài)。因?yàn)閺?fù)雜狀態(tài)不是直接可變的，所以當(dāng)它改變時它不會觸發(fā)組件的重新渲染。

結(jié)論

（言鼎科技）