引言

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

誤解

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

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

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

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

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

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

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

什么是React Query？

• React查詢是一個(gè)服務(wù)器端的庫(kù)，它可以幫助你保持服務(wù)器和客戶端之間的通信順暢，并以較少的代碼提高性能。
• 它對(duì)TS/JS、React、Vue、Svelte和Solid的異步狀態(tài)管理非常強(qiáng)大。
• 你可以手動(dòng)重新獲取、緩存、刷新、延遲加載、分頁(yè)，并對(duì)你的服務(wù)器端數(shù)據(jù)做很多事情。

React query提供了像useQuery和useMutation這樣的鉤子，這些鉤子可以讓你在短時(shí)間內(nèi)啟動(dòng)和運(yùn)行，并允許你刪除任何用于維護(hù)服務(wù)器端狀態(tài)的模板代碼。

引擎蓋下的React查詢

總結(jié)

在這篇文章中，我們涵蓋了很多內(nèi)容，我希望你沒(méi)有在中間離開(kāi)我 。如果你真的掌握了這篇文章的要點(diǎn)，請(qǐng)為自己感到驕傲，因?yàn)檫@篇文章是一個(gè)很難理解的內(nèi)容。 你可以學(xué)習(xí)更多關(guān)于react query的知識(shí)，這個(gè)庫(kù)還有更多的內(nèi)容。

以上就是ReactJS中不同類型的狀態(tài)詳解的詳細(xì)內(nèi)容，更多關(guān)于ReactJS不同類型狀態(tài)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論