了解並防止 React 中的獲取瀑布

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

在這篇文章中，我們將探討什麼是獲取瀑布、它們為何發生、它們如何影響您的 React 應用程序，以及最重要的是如何避免它們。

什麼是獲取瀑布？

讓我們從基礎開始。

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

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

來源：Sentry.io

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

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

為什麼會出現Fetch瀑布？

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

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

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

如何識別取瀑布

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

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

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

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

如何防止 React 中的取得瀑布

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

1. 並行取得資料

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

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

2. 解耦組件資料取得

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

3. 使用 React Query 或 SWR

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

例如，React Query 會自動處理資料擷取的快取、重試和後台同步，確保您的元件不會不必要地等待數據，並且僅在需要時才進行網路呼叫。

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. 快取資料以減少冗餘請求

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

結論

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

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

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