ReactJS中不同類型的狀態(tài)詳解

更新時間：2022年12月13日 15:16:50 作者：Jovie

這篇文章主要為大家介紹了ReactJS中不同類型的狀態(tài)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在這篇文章中，我們將介紹ReactJS中不同類型的狀態(tài)，以及我們是如何輕易地將這些類型混為一談的。我們還將討論哪種狀態(tài)應該使用哪種工具/庫/包。這篇文章將充滿了多汁的技術，所以要保持專注。所以不要浪費任何時間，讓我們開始吧

誤解

在已經(jīng)配置好redux的情況下，利用redux的一個誤區(qū)是當開發(fā)者開始為他們應用中的所有狀態(tài)使用redux時，這樣做是為了避免道具的鉆取，并通過用商店包裝你的應用，在你的應用的各個層面上訪問數(shù)據(jù)。但是，將服務器端的異步數(shù)據(jù)也存儲在你的存儲中，這就是問題所在。通過這樣做，你試圖每次都同步你的服務器狀態(tài)，無論它在服務器端是否被更新，這都會扼殺你的應用程序的性能。比如說

// Global state maintaining client and server-side state
const globalState = {
  authors,
  books,
  readers,
  libraries,
  darkMode,
  sidebarStatus,
}

現(xiàn)在我們的全局狀態(tài)正在處理作者、書籍、讀者和圖書館，這些都是服務器端的狀態(tài)，而且效率不高，每次都要請求新數(shù)據(jù)。

服務器端狀態(tài)與客戶端狀態(tài)

// Global state without server-side state
const globalState = {
  darkMode,
  sidebarStatus,
}

現(xiàn)在我們已經(jīng)把服務器端狀態(tài)從我們的全局狀態(tài)中移除，并在我們的客戶端狀態(tài)管理庫中處理它們的所有麻煩事。

我們的想法是有兩個真相來源，前端（客戶端狀態(tài)）和另一個是后端（服務器端狀態(tài)）。你繼續(xù)使用redux、context、mobx或任何其他全局狀態(tài)管理工具來處理客戶端狀態(tài)，同時使用React Query來處理服務器端狀態(tài)。