這篇文章主要講解了“如何用React-query解決狀態(tài)管理問(wèn)題”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何用React-query解決狀態(tài)管理問(wèn)題”吧！

目前成都創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、石拐網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

按照來(lái)源，前端有兩類「狀態(tài)」需要管理：

• 用戶交互的中間狀態(tài)

• 服務(wù)端狀態(tài)

在陳年的老項(xiàng)目中，通常用Redux、Mobx這樣的「全局狀態(tài)管理方案」無(wú)差別對(duì)待他們。

事實(shí)上，他們有很大區(qū)別：

用戶交互的中間狀態(tài)

比如組件的isLoading、isOpen，這類「狀態(tài)」的特點(diǎn)是：

• 以「同步」的形式更新

• 「狀態(tài)」完全由前端控制

• 「狀態(tài)」比較獨(dú)立(不同的組件擁有各自的isLoading)

這類「狀態(tài)」通常保存在組件內(nèi)部。

當(dāng)「狀態(tài)」需要跨組件層級(jí)傳遞，通常使用Context API。

再大范圍的「狀態(tài)」會(huì)使用Redux這樣的「全局狀態(tài)管理方案」。

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

當(dāng)我們從服務(wù)端請(qǐng)求數(shù)據(jù)：

function App() {   const [data, updateData] = useState(null);      useEffect(async () => {     const data = await axios.get('/api/user');     updateData(data);   }, [])    // 處理data }

返回的數(shù)據(jù)通常作為「狀態(tài)」保存在組件內(nèi)部(如App組件的data狀態(tài))。

如果是需要復(fù)用的通用「狀態(tài)」，通常將其保存在Redux這樣的「全局狀態(tài)管理方案」中。

這樣做有2個(gè)壞處：

1.需要重復(fù)處理請(qǐng)求中間狀態(tài)

為了讓App組件健壯，我們還需要處理請(qǐng)求中、出錯(cuò)等中間狀態(tài)：

function App() {   const [data, updateData] = useState(null);   const [isError, setError] = useState(false);   const [isLoading, setLoading] = useState(false);      useEffect(async () => {     setError(false);     setLoading(true);     try {       const data = await axios.get('/api/user');       updateData(data);     } catch(e) {       setError(true);     }     setLoading(false);   }, [])    // 處理data }

這類通用的中間狀態(tài)處理邏輯可能在不同組件中重復(fù)寫(xiě)很多次。

2.「緩存」的性質(zhì)不同于「狀態(tài)」

不同于交互的中間狀態(tài)，服務(wù)端狀態(tài)更應(yīng)被歸類為「緩存」，他有如下性質(zhì)：

• 通常以「異步」的形式請(qǐng)求、更新

• 「狀態(tài)」由請(qǐng)求的數(shù)據(jù)源控制，不由前端控制

• 「狀態(tài)」可以由不同組件共享

作為可以由不同組件共享的「緩存」，還需要考慮更多問(wèn)題，比如：

• 緩存失效

• 緩存更新

Redux一把梭固然方便。但是，區(qū)別對(duì)待不同類型「狀態(tài)」能讓項(xiàng)目更可控。

這里，推薦使用React-Query管理服務(wù)端狀態(tài)。

另一個(gè)可選方案是SWR[1]。你可以從這里[2]看到他們的區(qū)別

初識(shí)React-Query

React-Query是一個(gè)基于hooks的數(shù)據(jù)請(qǐng)求庫(kù)。

我們可以將剛才的例子用React-Query改寫(xiě)：

import { useQuery } from 'react-query'  function App() {   const {data, isLoading, isError} = useQuery('userData', () => axios.get('/api/user'));      if (isLoading) {     return 
loading
;   }      return (     
       {data.map(user => {user.name})}     
   ) }

React-Query中的Query指一個(gè)異步請(qǐng)求的數(shù)據(jù)源。

例子中userData字符串就是這個(gè)query獨(dú)一無(wú)二的key。

可以看到，React-Query封裝了完整的請(qǐng)求中間狀態(tài)(isLoading、isError...)。

不僅如此，React-Query還為我們做了如下工作：

• 多個(gè)組件請(qǐng)求同一個(gè)query時(shí)只發(fā)出一個(gè)請(qǐng)求

• 緩存數(shù)據(jù)失效/更新策略(判斷緩存合適失效，失效后自動(dòng)請(qǐng)求數(shù)據(jù))

• 對(duì)失效數(shù)據(jù)垃圾清理

數(shù)據(jù)的CRUD由2個(gè)hook處理：

• useQuery處理數(shù)據(jù)的查

• useMutation處理數(shù)據(jù)的增/刪/改

在下面的例子中，點(diǎn)擊「創(chuàng)建用戶」按鈕會(huì)發(fā)起創(chuàng)建用戶的post請(qǐng)求：

import { useQuery, queryCache } from 'react-query';  unction App() {  const {data, isLoading, isError} = useQuery('userData', () => axios.get('/api/user'));  // 新增用戶  const {mutate} = useMutation(data => axios.post('/api/user', data));   return (    
      {data.map(user => {user.name})}       {          mutate({name: 'kasong', age: 99})        }}      >        創(chuàng)建用戶          
  )

但是點(diǎn)擊后userData query對(duì)應(yīng)數(shù)據(jù)不會(huì)更新，因?yàn)樗€未失效。

所以我們需要告訴React-Query，userData query對(duì)應(yīng)的緩存已經(jīng)失效，需要更新：

import { useQuery, queryCache } from 'react-query';  function App() {   // ...   const {mutate} = useMutation(userData => axios.post('/api/user', userData), {     onSuccess: () => {       queryCache.invalidateQueries('userData')     }     })      // ... }

通過(guò)調(diào)用mutate方法，會(huì)觸發(fā)請(qǐng)求。

當(dāng)請(qǐng)求成功后，會(huì)觸發(fā)onSuccess回調(diào)，回調(diào)中調(diào)用queryCache.invalidateQueries，將userData對(duì)應(yīng)的query緩存置為invalidate。

這樣，React-Query就會(huì)重新請(qǐng)求userData對(duì)應(yīng)query的數(shù)據(jù)。

總結(jié)

通過(guò)使用React-Query(或SWR)這樣的數(shù)據(jù)請(qǐng)求庫(kù)，可以將服務(wù)端狀態(tài)從全局狀態(tài)中解放出來(lái)。

這為我們帶來(lái)很多好處：

• 使用通用的hook處理請(qǐng)求中間狀態(tài)

• 多余請(qǐng)求合并

• 針對(duì)緩存的更新/失效策略

• Redux等「全局狀態(tài)管理方案」可以更專注于「前端中間狀態(tài)」處理

感謝各位的閱讀，以上就是“如何用React-query解決狀態(tài)管理問(wèn)題”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何用React-query解決狀態(tài)管理問(wèn)題這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！