如果您是 React 開(kāi)發(fā)人員，那麼您肯定遇到過(guò)獲取瀑布 - 也稱(chēng)為請(qǐng)求瀑布或網(wǎng)路瀑布。當(dāng)您嘗試查看是什麼佔(zhàn)據(jù)了您精心設(shè)計(jì)的頁(yè)面載入時(shí)間如此之長(zhǎng)時(shí)，它們獨(dú)特的形狀就會(huì)出現(xiàn)在分析工具中。

在這篇文章中，我們將探討什麼是獲取瀑布、它們?yōu)楹伟l(fā)生、它們?nèi)绾斡绊懩?React 應(yīng)用程序，以及最重要的是如何避免它們。

什麼是獲取瀑布？

讓我們從基礎(chǔ)開(kāi)始。

取得瀑布是一種效能問(wèn)題，當(dāng)多個(gè) API 呼叫或取得請(qǐng)求連結(jié)在一起並依序執(zhí)行時(shí)，就會(huì)出現(xiàn)這種問(wèn)題。請(qǐng)求不是並行發(fā)送多個(gè)請(qǐng)求（這將允許它們同時(shí)完成），而是將請(qǐng)求排隊(duì)並按順序執(zhí)行。這會(huì)導(dǎo)致頁(yè)面渲染顯著延遲，尤其是在取得次數(shù)增加的情況下。

這是一個(gè)簡(jiǎn)單的視覺(jué)表示：

來(lái)源：Sentry.io

從上圖中，您可以清楚地看到「瀑布」模式中的順序延遲。每個(gè)請(qǐng)求僅在前一個(gè)請(qǐng)求完成後才開(kāi)始。在實(shí)務(wù)中，即使一個(gè)請(qǐng)求出現(xiàn)輕微延遲，也會(huì)導(dǎo)致整個(gè)頁(yè)面載入時(shí)間急劇增加。

這對(duì)使用者體驗(yàn)來(lái)說(shuō)尤其麻煩，因?yàn)楝F(xiàn)代網(wǎng)路使用者期望快速載入應(yīng)用程式。幾秒鐘的延遲可能會(huì)導(dǎo)致更高的跳出率和更低的參與度，從而影響您應(yīng)用程式的整體成功。

為什麼會(huì)出現(xiàn)Fetch瀑布？

React 中的獲取瀑布通常是由於元件的層次結(jié)構(gòu)而發(fā)生的。這是一個(gè)典型的場(chǎng)景：

1. 父元件取得資料：父元件掛載時(shí)發(fā)起取得要求。
2. 子元件等待資料：子元件依賴(lài)父元件所取得的數(shù)據(jù)，並且僅在父元件的資料可用時(shí)才渲染。
3. 順序請(qǐng)求：如果有多個(gè)嵌套組件，每個(gè)組件都可能依序觸發(fā)獲取請(qǐng)求，從而造成「瀑布」效果。

出現(xiàn)這種級(jí)聯(lián)行為是因?yàn)?React 中的元件是非同步渲染的。當(dāng)父元件取得資料時(shí)，子元件可能必須等待父元件的請(qǐng)求完成。如果這些提取處理不當(dāng)，您可能會(huì)出現(xiàn)明顯的延遲，因?yàn)槊總€(gè)請(qǐng)求都依賴(lài)前一個(gè)請(qǐng)求。

如何識(shí)別取瀑布

要確定您的 React 應(yīng)用程式是否受到取得瀑布的影響，您可以使用 Chrome DevTools 或 React DevTools 等工具來(lái)監(jiān)控網(wǎng)路請(qǐng)求和效能。在 Chrome DevTools 中，導(dǎo)覽至 網(wǎng)路 標(biāo)籤並尋找阻止頁(yè)面載入程序的 順序 API 呼叫。

在 React DevTools 中，您可以檢查元件重新渲染並識(shí)別任何導(dǎo)致多次觸發(fā)獲取請(qǐng)求的不必要的依賴(lài)項(xiàng)。

以下是一些可能發(fā)生取得瀑布的跡象：

• 頁(yè)面載入時(shí)間緩慢：如果您的頁(yè)面載入時(shí)間比預(yù)期長(zhǎng)。
• 可疑的效能模式：如果您注意到一系列 API 呼叫似乎是一個(gè)接一個(gè)而不是並行進(jìn)行的。

如何防止 React 中的取得瀑布

幸運(yùn)的是，有多種策略可以避免獲取瀑布並優(yōu)化您的 React 應(yīng)用程式以獲得更好的效能。

1. 並行取得資料

不要等待每個(gè) API 請(qǐng)求完成後再開(kāi)始下一個(gè)請(qǐng)求，而是考慮並行執(zhí)行多個(gè)獲取請(qǐng)求。這可以使用 JavaScript 的 Promise.all() 方法來(lái)完成，該方法可讓您同時(shí)執(zhí)行多個(gè) Promise。

這是並行取得資料的範(fàn)例：

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

透過(guò)並行取得數(shù)據(jù)，可以減少總等待時(shí)間並允許瀏覽器更快地載入資源。

2. 解耦組件資料取得

您可以重構(gòu)您的元件，以便它們不依賴(lài)父元件的資料來(lái)觸發(fā)自己的獲取。相反，讓每個(gè)子組件獨(dú)立處理自己的資料獲取。這可以透過(guò)提升狀態(tài)並傳遞必要的資料來(lái)完成，或使用React Query或SWR等程式庫(kù)來(lái)管理元件層級(jí)的取得。

3. 使用 React Query 或 SWR

像 React Query 和 SWR 這樣的函式庫(kù)非常適合管理 React 應(yīng)用程式中的資料取得。它們處理快取、後臺(tái)資料獲取和錯(cuò)誤處理，同時(shí)還允許您有效率地並行獲取資料。

例如，React Query 會(huì)自動(dòng)處理資料擷取的快取、重試和後臺(tái)同步，確保您的元件不會(huì)不必要地等待數(shù)據(jù)，並且僅在需要時(shí)才進(jìn)行網(wǎng)路呼叫。

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

4. 快取資料以減少冗餘請(qǐng)求

快取可以顯著減少對(duì)伺服器的冗餘請(qǐng)求的需要。透過(guò)在本機(jī)儲(chǔ)存中取得的資料（在元件狀態(tài)、上下文或快取庫(kù)中，例如 React Query），您可以避免不必要的網(wǎng)路請(qǐng)求，使您的應(yīng)用程式更快、更有效率。

結(jié)論

React 中的獲取瀑布可能是效能瓶頸的主要來(lái)源，但透過(guò)正確的策略，可以輕鬆避免它們。透過(guò)並行獲取資料、從元件中解耦資料獲取以及利用 React Query 等強(qiáng)大的庫(kù)，您可以提高 React 應(yīng)用程式的效能並增強(qiáng)使用者體驗(yàn)。

如果您在 React 程式碼庫(kù)中處理頻繁的獲取瀑布，那麼值得退後一步來(lái)分析您的資料獲取模式並實(shí)施這些最佳實(shí)踐。最終，優(yōu)化應(yīng)用程式與 API 的交互方式將帶來(lái)更快、更可靠和可擴(kuò)展的應(yīng)用程式。

以上是了解並防止 React 中的獲取瀑布的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！