了解和防止 React 中的获取瀑布-js教程-PHP中文网

如果您是 React 开发人员，那么您肯定遇到过获取瀑布 - 也称为请求瀑布或网络瀑布。当您尝试查看是什么占据了您精心设计的页面加载时间如此之长时，它们独特的形状就会出现在分析工具中。

在这篇博文中，我们将探讨什么是获取瀑布、它们为何发生、它们如何影响您的 React 应用程序，以及最重要的是如何避免它们。

什么是获取瀑布？

让我们从基础开始。

获取瀑布是一种性能问题，当多个 API 调用或获取请求链接在一起并依次执行时，就会出现这种问题。请求不是并行发送多个请求（这将允许它们同时完成），而是将请求排队并按顺序执行。这会导致页面渲染显着延迟，尤其是在获取次数增加的情况下。

这是一个简单的视觉表示：

Understanding and Preventing Fetch Waterfalls in React

来源：Sentry.io

从上图中，您可以清楚地看到“瀑布”模式中的顺序延迟。每个请求仅在前一个请求完成后才开始。在实践中，即使一个请求出现轻微延迟，也会导致整个页面加载时间急剧增加。

这对于用户体验来说尤其麻烦，因为现代网络用户期望快速加载应用程序。几秒钟的延迟可能会导致更高的跳出率和更低的参与度，从而影响您应用程序的整体成功。

为什么会出现Fetch瀑布？

React 中的获取瀑布通常是由于组件的层次结构而发生的。这是一个典型的场景：

父组件获取数据：父组件挂载时发起获取请求。
子组件等待数据：子组件依赖于父组件获取的数据，并且仅在父组件的数据可用时才渲染。
顺序请求：如果有多个嵌套组件，每个组件都可能依次触发获取请求，从而造成“瀑布”效果。

出现这种级联行为是因为 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
};

登录后复制