日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

• 用戶交互的中間狀態(tài)
• 服務(wù)端狀態(tài)

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

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

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

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

• 以「同步」的形式更新
• 「狀態(tài)」完全由前端控制
• 「狀態(tài)」比較獨立(不同的組件擁有各自的isLoading)

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

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

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

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

當我們從服務(wù)端請求數(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個壞處：

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

為了讓App組件健壯，我們還需要處理請求中、出錯等中間狀態(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ù)寫很多次。

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

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

• 通常以「異步」的形式請求、更新
• 「狀態(tài)」由請求的數(shù)據(jù)源控制，不由前端控制
• 「狀態(tài)」可以由不同組件共享

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

• 緩存失效
• 緩存更新

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

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

[[382129]]

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

初識React-Query

React-Query是一個基于hooks的數(shù)據(jù)請求庫。

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

 
 
 

  
  
  
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指一個異步請求的數(shù)據(jù)源。

例子中userData字符串就是這個query獨一無二的key。

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

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

• 多個組件請求同一個query時只發(fā)出一個請求
• 緩存數(shù)據(jù)失效/更新策略(判斷緩存合適失效，失效后自動請求數(shù)據(jù))
• 對失效數(shù)據(jù)垃圾清理

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

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

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

 
 
 

  
  
  
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}
)}   
  
  
       
  
  
       onClick={() => { 
  
  
  
         mutate({name: 'kasong', age: 99}) 
  
  
  
       }} 
  
  
  
     > 
  
  
  
       創(chuàng)建用戶 
  
  
  
      
  
  
  
   
 
  
  
  
 ) 
 
 
 

 但是點擊后userData query對應(yīng)數(shù)據(jù)不會更新，因為他還未失效。

所以我們需要告訴React-Query，userData query對應(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') 
  
  
  
    }   
  
  
  
  }) 
  
  
  
   
  
  
  
  // ... 
  
  
  
} 
 
 
 

通過調(diào)用mutate方法，會觸發(fā)請求。

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

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

總結(jié)

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

這為我們帶來很多好處：

• 使用通用的hook處理請求中間狀態(tài)
• 多余請求合并
• 針對緩存的更新/失效策略
• Redux等「全局狀態(tài)管理方案」可以更專注于「前端中間狀態(tài)」處理

參考資料

[1]SWR: https://swr.vercel.app/

[2]這里: https://react-query.tanstack.com/comparison

 【編輯推薦】

1. 為什么你總是學不會Python，入門Python的4大陷阱
2. 厭倦了默認系統(tǒng)字體？這是在Windows 10上進行更改的方法
3. 5G手機熱銷之前，要先解決這些問題
4. 手把手教你用Python爬取百度搜索結(jié)果并保存
5. 揭秘登上2021春晚舞臺的黑科技-XR技術(shù)

當前題目：用React-query解決你一半的狀態(tài)管理問題
當前URL：http://www.dlmjj.cn/article/cdjhghs.html