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

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

什麼是獲取瀑布？

讓我們從基礎開始。

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

這是一個簡單的視覺表示：

來源：Sentry.io

從上圖中，您可以清楚地看到「瀑布」模式中的順序延遲。每個請求僅在前一個請求完成後才開始。在實務中，即使一個請求出現(xiàn)輕微延遲，也會導致整個頁面載入時間急劇增加。

這對使用者體驗來說尤其麻煩，因為現(xiàn)代網(wǎng)路使用者期望快速載入應用程式。幾秒鐘的延遲可能會導致更高的跳出率和更低的參與度，從而影響您應用程式的整體成功。

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

React 中的獲取瀑布通常是由於元件的層次結構而發(fā)生的。這是一個典型的場景：

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

出現(xiàn)這種級聯(lián)行為是因為 React 中的元件是非同步渲染的。當父元件取得資料時，子元件可能必須等待父元件的請求完成。如果這些提取處理不當，您可能會出現(xiàn)明顯的延遲，因為每個請求都依賴前一個請求。

如何識別取瀑布

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

在 React DevTools 中，您可以檢查元件重新渲染並識別任何導致多次觸發(fā)獲取請求的不必要的依賴項。

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

• 頁面載入時間緩慢：如果您的頁面載入時間比預期長。
• 可疑的效能模式：如果您注意到一系列 API 呼叫似乎是一個接一個而不是並行進行的。

如何防止 React 中的取得瀑布

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

1. 並行取得資料

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

這是並行取得資料的範例：

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

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

2. 解耦組件資料取得

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

3. 使用 React Query 或 SWR

像 React Query 和 SWR 這樣的函式庫非常適合管理 React 應用程式中的資料取得。它們處理快取、後臺資料獲取和錯誤處理，同時還允許您有效率地並行獲取資料。

例如，React Query 會自動處理資料擷取的快取、重試和後臺同步，確保您的元件不會不必要地等待數(shù)據(jù)，並且僅在需要時才進行網(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. 快取資料以減少冗餘請求

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

結論

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

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

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