多年來(lái)，React.JS 的大規(guī)模增長(zhǎng)催生了不同的狀態(tài)管理庫(kù)等。

在撰寫本文時(shí)，我們可以使用 React 中可用的狀態(tài)管理庫(kù)是巨大的。因此，知道為特定項(xiàng)目選擇哪個(gè)狀態(tài)管理庫(kù)以免被來(lái)自 React 社區(qū)的噪音和新聞所迷惑是促進(jìn)應(yīng)用程序開(kāi)發(fā)的重要因素。

[[417554]]

一些開(kāi)發(fā)人員通過(guò)使用 React Hooks 來(lái)應(yīng)對(duì)挑戰(zhàn);其他人將它們與 Redux 或新發(fā)布的 Recoil 等應(yīng)用程序狀態(tài)管理庫(kù)相結(jié)合。

在本文中，我們將討論在典型的 React 應(yīng)用程序中使用 Redux、Hooks 和 Recoil 進(jìn)行狀態(tài)管理及其最佳用例。

我們還將嘗試回答以下問(wèn)題：

在選擇狀態(tài)管理庫(kù)之前要考慮什么指標(biāo)?

注意：本教程將對(duì)有興趣開(kāi)發(fā)需要狀態(tài)管理庫(kù)的 React 應(yīng)用程序的讀者有所幫助。

本文不是 React 狀態(tài)管理的介紹。它需要對(duì) React、hook 和一些 Redux 有基本的了解;因此，如果您開(kāi)始使用 React 和 React 中的狀態(tài)管理，請(qǐng)?jiān)陂_(kāi)始本教程之前先了解這些基礎(chǔ)知識(shí)。

簡(jiǎn)而言之，什么是狀態(tài)?

狀態(tài)管理只是一種實(shí)現(xiàn)跨組件通信和數(shù)據(jù)共享的方式。它創(chuàng)建了一個(gè)具體的數(shù)據(jù)結(jié)構(gòu)來(lái)表示您可以讀寫的應(yīng)用程序狀態(tài)。

從 React 16.8 開(kāi)始，每個(gè) React 組件，無(wú)論是函數(shù)式還是類，都可以有一個(gè)狀態(tài)。

在最簡(jiǎn)單的定義中，State 是一個(gè) JavaScript 對(duì)象，它表示可以根據(jù)用戶的結(jié)果操作更改的組件部分。您也可以說(shuō)狀態(tài)只是組件的內(nèi)存。

當(dāng)用戶在典型的 React 應(yīng)用程序中執(zhí)行操作時(shí)，組件的狀態(tài)會(huì)發(fā)生變化。雖然這還不錯(cuò)，但如果應(yīng)用程序開(kāi)始擴(kuò)展，它很快就會(huì)成為一個(gè)問(wèn)題;因此，這樣一個(gè)應(yīng)用程序的復(fù)雜性使得跟蹤所有依賴項(xiàng)變得非常困難。

為了回答介紹問(wèn)題，假設(shè)我們正在構(gòu)建一個(gè)電子商務(wù)應(yīng)用程序;在這樣的應(yīng)用程序中，幾乎每個(gè)元素都可以是一個(gè)組件——購(gòu)物車、按鈕、查看購(gòu)物車會(huì)話、結(jié)帳、登錄欄等。在這個(gè)應(yīng)用程序中，添加到購(gòu)物車的單個(gè)用戶操作可以影響許多其他組件通過(guò)：

• 改變購(gòu)物車組件本身的狀態(tài)
• 將購(gòu)物車添加到用戶的購(gòu)物車歷史記錄中
• 結(jié)帳產(chǎn)品項(xiàng)目

這只是提到我們可以添加到電子商務(wù)應(yīng)用程序的其他大量?jī)?nèi)容中的一些內(nèi)容。如果負(fù)責(zé)工程師在開(kāi)發(fā)應(yīng)用程序時(shí)不考慮可擴(kuò)展性，從長(zhǎng)遠(yuǎn)來(lái)看，他們很快就會(huì)遇到許多錯(cuò)誤和問(wèn)題。

像這樣不斷調(diào)試和改進(jìn)應(yīng)用程序最終可能會(huì)很痛苦。

上述場(chǎng)景向我們展示了狀態(tài)在典型 React 應(yīng)用程序中的重要性。

在管理此應(yīng)用程序中的狀態(tài)時(shí)，我們可以使用我們選擇的任何庫(kù);無(wú)論如何，他們?nèi)匀粫?huì)完成工作。

通常，狀態(tài)必須被提升到最近的父組件和下一個(gè)，直到它到達(dá)需要狀態(tài)的兩個(gè)組件的共同祖先，然后它被傳遞下來(lái)。這個(gè)過(guò)程可能是壓倒性的，并使?fàn)顟B(tài)難以維持。通常，您可能需要將數(shù)據(jù)傳遞給甚至不需要它的組件。

隨著應(yīng)用程序變大，狀態(tài)管理變得混亂。這就是為什么您需要像 Redux、Recoil 這樣的狀態(tài)管理工具，以便更輕松地維護(hù)這些狀態(tài)。

在接下來(lái)的部分中，我們將實(shí)際了解所有狀態(tài)管理庫(kù)(Redux、Hooks、Recoil)、它們的獨(dú)特性以及在使用它們之前需要考慮的事項(xiàng)。

Redux

我們列表中的第一個(gè)是 Redux;它已經(jīng)存在了一段時(shí)間，幾乎是第一個(gè)基于 React 的狀態(tài)管理庫(kù)。

創(chuàng)建狀態(tài)管理庫(kù) Redux 是為了解決我們電子商務(wù)應(yīng)用程序中的問(wèn)題。它提供了一個(gè)名為 store 的 JavaScript 對(duì)象，一旦設(shè)置，它就會(huì)包含應(yīng)用程序中的所有狀態(tài)，并在必要時(shí)更新它們。這是 Redux 工作原理的簡(jiǎn)化可視化。

也許你會(huì)問(wèn)，為什么 Redux 經(jīng)常與 React 一起使用?我的經(jīng)驗(yàn)是因?yàn)?Redux 會(huì)根據(jù)用戶的操作來(lái)處理狀態(tài)更新，尤其是在 UI 中;除此之外，Redux 可以用作任何框架的獨(dú)立狀態(tài)管理。

什么時(shí)候使用 Redux?

截至本文撰寫之時(shí)，Redux 是最流行的 React 狀態(tài)管理庫(kù)之一。

在本節(jié)中，我們將仔細(xì)研究何時(shí)在應(yīng)用程序中使用 Redux。

首先，Redux 允許您在一個(gè)地方管理應(yīng)用程序的狀態(tài)，并使應(yīng)用程序中的更改更具可預(yù)測(cè)性和可追溯性。它使您的應(yīng)用程序中發(fā)生的更改更容易弄清楚。不幸的是，所有這些好處都伴隨著特定的限制和權(quán)衡。

通常，開(kāi)發(fā)人員覺(jué)得使用 Redux 會(huì)增加一些樣板代碼，使小事情看起來(lái)勢(shì)不可擋;然而，這完全取決于應(yīng)用程序的架構(gòu)決策。

了解何時(shí)真正需要使用 Redux 的最簡(jiǎn)單方法之一是在本地管理狀態(tài)開(kāi)始變得混亂時(shí)。

隨著應(yīng)用程序的增長(zhǎng)，跨組件的狀態(tài)共享也會(huì)變得乏味。

那時(shí)，您現(xiàn)在就開(kāi)始尋找使流程輕松的方法。

在下一節(jié)中，我們將看看為什么我們應(yīng)該使用 React 進(jìn)行 Redux。

為什么要使用 Redux?

使用 Redux 和 React 消除了管理狀態(tài)的麻煩，讓你更容易追蹤哪個(gè)動(dòng)作導(dǎo)致了任何變化，從而簡(jiǎn)化了應(yīng)用程序并使其更容易維護(hù)。

讓我們來(lái)看看使用 Redux 進(jìn)行狀態(tài)管理帶來(lái)的一些權(quán)衡。

(1) 社區(qū)支持

作為 React 和 Redux 的官方綁定庫(kù)，React-Redux 包含了龐大的用戶社區(qū)。這使得尋求幫助、了解最佳實(shí)踐、使用基于 React-Redux 構(gòu)建的庫(kù)以及在不同應(yīng)用程序中重用您的知識(shí)變得更加容易。

它是 Github 上最受關(guān)注的 React 狀態(tài)管理庫(kù)。

(2) 增強(qiáng)性能

React Redux 確保性能優(yōu)化，以便只有連接的組件僅在需要時(shí)重新渲染;因此保持應(yīng)用程序的狀態(tài)全局不會(huì)導(dǎo)致任何問(wèn)題。

(3) Redux 使?fàn)顟B(tài)可預(yù)測(cè)

在 Redux 中，狀態(tài)始終是可預(yù)測(cè)的。如果相同的 state 和 action 移動(dòng)到 reducer，它會(huì)得到相同的結(jié)果，因?yàn)?reducer 是純函數(shù)。狀態(tài)也是不可變的，永遠(yuǎn)不會(huì)改變。它使執(zhí)行諸如無(wú)限撤消和重做之類的艱巨任務(wù)成為可能。還可以實(shí)現(xiàn)時(shí)間旅行——即在之前的狀態(tài)之間來(lái)回移動(dòng)并實(shí)時(shí)查看結(jié)果的能力。

(4) 本地存儲(chǔ)上的狀態(tài)持久性

將應(yīng)用程序的某些狀態(tài)保留在本地存儲(chǔ)上并在刷新后恢復(fù)它是可能的。它使得在本地存儲(chǔ)上存儲(chǔ)諸如購(gòu)物車數(shù)據(jù)之類的東西真的很棒。

(5) 服務(wù)端渲染

我們也可以使用redux進(jìn)行服務(wù)端渲染。有了它，您可以通過(guò)將應(yīng)用程序的狀態(tài)連同它對(duì)服務(wù)器請(qǐng)求的響應(yīng)發(fā)送到服務(wù)器來(lái)處理應(yīng)用程序的初始呈現(xiàn)。

(6) Redux 是可維護(hù)的

Redux 對(duì)代碼應(yīng)該如何設(shè)計(jì)很嚴(yán)格，這使得熟悉 Redux 的人更容易理解任何 Redux 應(yīng)用程序結(jié)構(gòu)。它通常更易于維護(hù)。它還可以幫助您將業(yè)務(wù)邏輯與組件樹(shù)分離。對(duì)于大型應(yīng)用程序，讓您的應(yīng)用程序更具可預(yù)測(cè)性和可維護(hù)性至關(guān)重要。

(7) 調(diào)試變得容易

Redux 使調(diào)試應(yīng)用程序變得容易。通過(guò)記錄操作和狀態(tài)，很容易理解編碼錯(cuò)誤、網(wǎng)絡(luò)錯(cuò)誤和生產(chǎn)過(guò)程中可能出現(xiàn)的其他形式的錯(cuò)誤。

除了日志之外，它還有優(yōu)秀的 DevTools，可以讓你對(duì)動(dòng)作進(jìn)行時(shí)間旅行，在頁(yè)面刷新時(shí)保持動(dòng)作等。對(duì)于中大型應(yīng)用程序，調(diào)試比實(shí)際開(kāi)發(fā)功能需要更多的時(shí)間。

盡管 Redux 有其優(yōu)點(diǎn)，但并不保證您在所有應(yīng)用程序中都添加了 Redux。

您的應(yīng)用程序可以在沒(méi)有 Redux 的情況下運(yùn)行良好。

Recoil

Recoil 似乎是狀態(tài)管理社區(qū)的最新工具——一個(gè)擁有大量?jī)?yōu)秀庫(kù)的社區(qū)，如 Context、Mobx 和 Redux 等。

在詳細(xì)介紹 Recoil 之前，我想指出這個(gè)新的狀態(tài)管理庫(kù)并不是 React 的“官方”狀態(tài)管理庫(kù)。

然而，記錄顯示它是由 Facebook 團(tuán)隊(duì)的工程師，即 React 創(chuàng)建者構(gòu)建和發(fā)布的。

但是，正如 Redux 不是 React 的官方狀態(tài)管理庫(kù)一樣，Recoil 也不是，但如果它被證明對(duì)整個(gè) React 生態(tài)系統(tǒng)有價(jià)值，那么它可能會(huì)被 React 愛(ài)好者廣泛采用。

Recoil 解決的主要問(wèn)題

雖然它有它的學(xué)習(xí)曲線，但它仍然解決與大多數(shù)其他狀態(tài)管理庫(kù)相同的問(wèn)題：全局狀態(tài)管理。

在使用 Recoil 一段時(shí)間后，以下是我認(rèn)為 Recoils 非常方便的區(qū)別。

(1) 類似 React 的方法和簡(jiǎn)單

Recoil 的簡(jiǎn)單性是首屈一指的，因此它在此列表中的原因。

您可以像使用 Redux 或 MobX 一樣構(gòu)建使用 Recoil 構(gòu)建的任何應(yīng)用程序。

然而，Recoil 感覺(jué)就像在使用 React 的 useState 的全球版本。它還支持并發(fā)模式，這是一個(gè)巨大的優(yōu)勢(shì)(在撰寫本文時(shí)仍在進(jìn)行中)。

(2) 簡(jiǎn)單的學(xué)習(xí)曲線

Recoil 不像 Redux 和 Mobx 那樣強(qiáng)加嚴(yán)格的學(xué)習(xí)曲線。

除了易于理解的 Atom 和 Selectors 之外，它們不需要學(xué)習(xí)太多。

(3) 應(yīng)用程序范圍的觀察

與其他狀態(tài)管理庫(kù)類似，Recoil 可以很好地處理應(yīng)用程序范圍的狀態(tài)觀察。使用 Recoil 的其他好處包括：

• 無(wú)樣板 API
• 分布式和增量狀態(tài)定義

Recoil 的核心核心概念是原子和選擇器;涵蓋這一部分超出了本文的范圍。但是，您可以查看他們的文檔以獲得深入的概述。

何時(shí)使用Recoil

在發(fā)布不到兩年的時(shí)間里，Recoil 已經(jīng)發(fā)展得如此之快，以至于在撰寫本文時(shí)，它在 Github 上擁有大約 12,000 顆星。除此之外，它在 React 愛(ài)好者和整個(gè) React 社區(qū)中逐漸獲得動(dòng)力和大規(guī)模采用。

就個(gè)人而言，我在我的任何項(xiàng)目中使用 Recoil 的唯一原因是我不打算在我的代碼庫(kù)中有這么多 Redux 樣板。我曾經(jīng)在生產(chǎn)中使用過(guò) Recoil，沒(méi)有發(fā)生任何可怕的事情;到目前為止，一切仍然運(yùn)行良好。

所以什么時(shí)候使用 Recoil 可能完全取決于你的應(yīng)用程序的架構(gòu)決定，如果你和我一樣喜歡簡(jiǎn)單，你可能會(huì)開(kāi)始使用 Recoil 。

使用 React Hooks

Hooks 是 React 庫(kù)自創(chuàng)建以來(lái)添加的最杰出的特性之一。Hooks 為功能組件帶來(lái)了“狀態(tài)”?，F(xiàn)在，功能組件可以自己創(chuàng)建和管理本地狀態(tài)，就像類組件一樣。

任何已經(jīng)接觸過(guò) React 的人都應(yīng)該熟悉 React Hooks，包括useState、useEffect、 和useReducer等。

本節(jié)將討論如何方便的 React Hooks 可以獨(dú)立使用，而無(wú)需與任何外部狀態(tài)管理庫(kù)相互干擾。

你可以在沒(méi)有任何庫(kù)的情況下使用 React Hooks 作為你的主要狀態(tài)管理工具，但這取決于你對(duì) React Hooks 的經(jīng)驗(yàn)和理解。

它們本身就很強(qiáng)大，幾乎可以完成外部庫(kù)可以做的任何事情。

在某種程度上，其他狀態(tài)管理工具具有一些優(yōu)勢(shì)。盡管如此，他們的程序使入門具有挑戰(zhàn)性。就像 Redux 一樣，需要一些樣板代碼才能讓它在我們的應(yīng)用程序中工作;因此，它引入了不必要的復(fù)雜性。

另一方面，使用useContextAPI 和 React Hooks，無(wú)需安裝外部庫(kù)即可讓我們的應(yīng)用程序正常運(yùn)行。它使它成為一種更簡(jiǎn)單、更直接的方式來(lái)處理 React 應(yīng)用程序中的全局狀態(tài)管理。

注意：假設(shè)您已經(jīng)熟悉useState，我們將研究?jī)蓚€(gè)有助于 React 狀態(tài)管理過(guò)程的Hooks。

useReducer

該useReducer來(lái)自React 16.8。就像reduce() JavaScript 中的方法一樣，useReducerHook 接收兩個(gè)值作為它的參數(shù)——一個(gè) reducer 函數(shù)和一個(gè)初始狀態(tài)——然后返回一個(gè)新?tīng)顟B(tài)：

const [state, dispatch] = useReducer((state, action) => { 
  const { type } = action; 
  switch(action) { 
    case 'action description': 
      const newState = // do something with the action 
      return newState; 
    default: 
      throw new Error() 
  } 
}, []); 

在上面的代碼片段中，我們定義了我們的狀態(tài)和相應(yīng)的方法dispatch，來(lái)處理它。當(dāng)我們調(diào)用該dispatch方法時(shí)，useReducer() Hook 將根據(jù)type我們的方法在其 action 參數(shù)中接收到的來(lái)執(zhí)行操作：

... 
return ( 
  <button onClick={() => 
    dispatch({ type: 'action type'})}> 
  </button> 
) 

使用上下文

此鉤子用于獲取 Provider 的當(dāng)前上下文。為了創(chuàng)建和提供上下文，我們使用React.createContextAPI。

const myContext = React.createContext() 

我們將根組件放在myContextProvider之間：

function App() { 
    return ( 
        <myContext.Provider value={900}> 
            <Root /> 
        </myContext.Provider> 
    ) 
} 

為了消耗由我們提供的值，我們使用useContext鉤子。

function Root() { 
    const value = useContext(myContext) 
    return ( 
        <div> 
            <h3>My Context value: {value} </h3> 
        </> 
    ) 
}