如果您是 React 開(kāi)發(fā)人員，那么您肯定遇到過(guò)獲取瀑布 - 也稱為請(qǐng)求瀑布或網(wǎng)絡(luò)瀑布。當(dāng)您嘗試查看是什么占據(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 調(diào)用或獲取請(qǐng)求鏈接在一起并依次執(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í)踐中，即使一個(gè)請(qǐng)求出現(xiàn)輕微延遲，也會(huì)導(dǎo)致整個(gè)頁(yè)面加載時(shí)間急劇增加。

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

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

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

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

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

如何識(shí)別取瀑布

要確定您的 React 應(yīng)用程序是否受到獲取瀑布的影響，您可以使用 Chrome DevTools 或 React DevTools 等工具來(lái)監(jiān)控網(wǎng)絡(luò)請(qǐng)求和性能。在 Chrome DevTools 中，導(dǎo)航至 網(wǎng)絡(luò) 選項(xiàng)卡并查找阻止頁(yè)面加載過(guò)程的 順序 API 調(diào)用。

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

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

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

如何防止 React 中的獲取瀑布

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

1. 并行獲取數(shù)據(jù)

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

這是并行獲取數(shù)據(jù)的示例：

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. 解耦組件數(shù)據(jù)獲取

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

3. 使用 React Query 或 SWR

像 React Query 和 SWR 這樣的庫(kù)非常適合管理 React 應(yīng)用程序中的數(shù)據(jù)獲取。它們處理緩存、后臺(tái)數(shù)據(jù)獲取和錯(cuò)誤處理，同時(shí)還允許您高效地并行獲取數(shù)據(jù)。

例如，React Query 會(huì)自動(dòng)處理數(shù)據(jù)獲取的緩存、重試和后臺(tái)同步，確保您的組件不會(huì)不必要地等待數(shù)據(jù)，并且僅在需要時(shí)才進(jìn)行網(wǎng)絡(luò)調(diào)用。

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. 緩存數(shù)據(jù)以減少冗余請(qǐng)求

緩存可以顯著減少對(duì)服務(wù)器的冗余請(qǐng)求的需要。通過(guò)在本地存儲(chǔ)獲取的數(shù)據(jù)（在組件狀態(tài)、上下文或緩存庫(kù)中，如 React Query），您可以避免不必要的網(wǎng)絡(luò)請(qǐng)求，使您的應(yīng)用程序更快、更高效。

結(jié)論

React 中的獲取瀑布可能是性能瓶頸的主要來(lái)源，但通過(guò)正確的策略，可以輕松避免它們。通過(guò)并行獲取數(shù)據(jù)、從組件中解耦數(shù)據(jù)獲取以及利用 React Query 等強(qiáng)大的庫(kù)，您可以提高 React 應(yīng)用程序的性能并增強(qiáng)用戶體驗(yàn)。

如果您在 React 代碼庫(kù)中處理頻繁的獲取瀑布，那么值得退后一步來(lái)分析您的數(shù)據(jù)獲取模式并實(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)文章！