在其他框架中也可以應用到React18中請求數據的官方姿勢

3403771864 發布于2022-10-18 07:16 / 463人閱讀

　　首先我來說下在useEffect中請求初始數據，如下所示：

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

　　這種方式到了React18并不適用。

　　那如果這種方法不行，要推薦的又是那種方式？

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

　　這是一個普遍的問題

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

　　effect

　　didMount/didUpdate

　　當在初始化時請求數據的需求，框架基本上執行的都是回調函數內請求操作，并在數據返回后更新狀態。

　　但就有這么一個特立獨行，就是React。相反，他很普遍。

　　React“獨特”，是因為React官方在引導開發者不要用這種形式書寫代碼（通過嚴格模式下useEffect執行兩次放大這個問題）。

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

　　現在來說說影響。注意，這些影響同樣適用于其他框架。

　　但這樣寫為什么不被推薦？

　　需要解決競態問題

　　在useEffect中請求數據要面臨的第一個問題是需要解決競態問題。

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

　　下面是你的寫法：

　　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;
　　}

　　現在注意點就是開發階段很難復現的bug—— 假如userID變化足夠快，會發起多個不同的用戶請求。

　　這也決定最終展示哪個用戶的數據，取決于哪個請求先返回。這就是請求的競態問題。

　　點擊返回按鈕后重新請求數據

　假設用戶跳轉到新的頁面后，之后又通過瀏覽器回退按鈕回到當前頁面，因此并不能立刻看到他跳轉前的頁面。

　　反之，看到的可能是個白屏 —— 因為還需要重新執行useEffect獲取初始數據。

　　這個問題的本質原因是：沒有初始數據的緩存。

　　CSR時的白屏時間

　　CSR（Client-Side Rendering，客戶端渲染）時在useEffect中請求數據，在數據返回前頁面都是白屏狀態。

　　瀑布問題

　　在父子組件都依賴useEffect獲取初始數據渲染，這樣影響整個渲染流程如下：

　　父組件mount

　　父組件useEffect執行，請求數據

　　數據返回后重新渲染父組件

　　子組件mount

　　子組件useEffect執行，請求數據

　　數據返回后重新渲染子組件

　　可見，當父組件數據請求成功后子組件甚至還沒開始首屏渲染。

　　這就是渲染中的瀑布問題 —— 數據像瀑布一樣一級一級向下流動，流到的組件才開始渲染，很低效。

　　useEffect的問題很多，那么有什么適用的好方式？

　　好的方式

　　在Meta公司內部，基于Relay驅動數據（但請求數據要求使用GraphQL），所以這套架構比較難在社區普及開。

　　但是，現在社區已經有了成熟的請求數據的方案。

　　對于SSR，可以使用Next.js、Remix接管數據請求。

　　對于CSR，可以使用React Query、useSWR接管數據請求。

　　上述解決方案都是十分成熟，當然如果你有其他解決方案，建議參考React新文檔中下面兩篇文章：

　　使用effect同步數據

　　你可能不需要使用effect

　　注意，中文可以看的總結，記住在React新文檔：不要濫用effect哦

　　最后，總結下其實React18之后不推薦的請求數據的方式以及推薦的請求數據的方式。其中不推薦的請求數據的方式這個現象不僅存在于React中，其他很多框架也都會出現這樣問題。

云服務器 GPU云服務器大數據在新零售中的應用大數據在紡織服裝行業中的應用在深度學習中的應用機器學習在企業中的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128099.html

Locale深度解析

摘要：特別是開發一些只做國內市場，只有中文的項目時，可能就直接被忽視了。應用場景的使用場景基本就是根據不同國家和語言，進行不同的顯示。比如中解析時，可以同時處理兩種格式。一組為，一組為。對于中文，英文，日文都有一個默認的匹配。摘要 Locale是日常開發中比較容易忽視的技術點。特別是開發一些只做國內市場，只有中文的項目時，Locale可能就直接被忽視了。而且在項目提出多語言支持的時候，因為...

spacewander 2019-08-26 10:19 評論0 收藏0
Locale深度解析

摘要：特別是開發一些只做國內市場，只有中文的項目時，可能就直接被忽視了。應用場景的使用場景基本就是根據不同國家和語言，進行不同的顯示。比如中解析時，可以同時處理兩種格式。一組為，一組為。對于中文，英文，日文都有一個默認的匹配。摘要 Locale是日常開發中比較容易忽視的技術點。特別是開發一些只做國內市場，只有中文的項目時，Locale可能就直接被忽視了。而且在項目提出多語言支持的時候，因為...

taowen 2019-08-16 18:41 評論0 收藏0
全棧最后一公里 - Node.js 項目的線上服務器部署與發布

摘要：沒有耐心閱讀的同學，可以直接前往學習全棧最后一公里。我下面會羅列一些，我自己錄制過的一些項目，或者其他的我覺得可以按照這個路線繼續深入學習的項目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術軟文，閱讀需謹慎，長約 7000 字，通讀需 5 分鐘大家好，我是 Scott，本文通過提供給大家學習的方法，...

Nosee 2019-06-26 17:14 評論0 收藏0
Taro 優秀學習資源匯總

摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 評論0 收藏0