快捷導(dǎo)航

React18中請求數(shù)據(jù)的官方姿勢適用其他框架

更新時間：2022年07月13日 08:33:36 作者：魔術(shù)師卡頌

這篇文章主要為大家介紹了官方回答在React18中請求數(shù)據(jù)的正確姿勢詳解，同樣也適用其他框架，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

一些同學(xué)喜歡在useEffect中請求初始數(shù)據(jù)，類似這樣：

useEffect(() => {
  fetch(xxx).then(data => setState(data.json()))
}, [])

但React18并不推薦這種方式。

這么寫有什么問題？如果不推薦這種方式，那么推薦的方式是什么呢？

本文來看看Dan在reddit是如何回答上述問題的。

這是一個普遍的問題

除了React外，大部分以組件形式組織的前端框架，都有如下類似的API：

effect

didMount/didUpdate

如果有初始化時請求數(shù)據(jù)的需求，這類框架都會選擇在上述回調(diào)函數(shù)內(nèi)執(zhí)行請求操作，并在數(shù)據(jù)返回后更新狀態(tài)。

所以，這并不是React獨有的問題。相反，他很普遍。

之所以在React中這么突出，是因為React官方在引導(dǎo)開發(fā)者不要用這種形式書寫代碼（通過嚴(yán)格模式下useEffect執(zhí)行兩次放大這個問題）。

而React之所以這么做，是為了項目的性能以及UX（User Experience，用戶體驗）。

下面我們來細(xì)聊這么做的影響。注意，這些影響同樣適用于其他框架。

為什么不推薦這么寫？

需要解決競態(tài)問題

在useEffect中請求數(shù)據(jù)要面臨的第一個問題是需要解決競態(tài)問題。

假設(shè)你有個組件User，接收userID作為props，用userID請求數(shù)據(jù)后展示用戶信息。

下面是你的寫法：

function User({userID}) {
  const [data, setData] = useState(null);
  useEffect(() => {
    const res = await fetch(`https://xxx/${userID}/`);
    setData(res.json());
  }, [userID]);
  if (data) {
    return <div>{data.name}</div>;
  } 
  return null;
}

這里有個開發(fā)階段很難復(fù)現(xiàn)的bug —— 如果userID變化足夠快，會發(fā)起多個不同的用戶請求。

而最終展示哪個用戶的數(shù)據(jù)，取決于哪個請求先返回。這就是請求的競態(tài)問題。