Javascript 在React中处理带有API请求的许多组件的加载的最佳方法？

我目前正在React中构建一个SPA，它从一些API获取大约1000项数据，并在应用程序主页上的一个大列表中显示

API只有一个端点来获取所有端点，如下所示：

{
    id: 1,
    url: https://api/1
},
{
    id: 2,
    url: https://api/2
}
...

在我的应用程序中，我在父组件中获取这些数据，映射到生成的数组，并为每个数组渲染一个组件。然后，在每个子组件中，我调用“url”属性中的端点来获取该列表项所需的数据

显然，这意味着同时执行大约1000个API请求，这绝对不理想。我正在努力找出一种最有效的方法，在不严重影响性能的情况下在页面上呈现列表项组件

---

我研究过延迟加载，但在使用API请求呈现组件时，我似乎无法使其正常工作。如果可能的话，我希望避免分页。

您首先不应该单独发送每个项目的请求。您可以做的是发送所需的ID数组，然后在一个请求中获取它们的所有数据。完成后，可以渲染组件，如果性能至关重要，可以使用虚拟化来改进渲染

如果你真的想拥有最好的性能，我建议你按照同样的原则进行延迟加载，例如每个请求50个项目，当你向下滚动到底部时，你会加载50个项目，以此类推。将此与虚拟化相结合，您将获得非常好的结果

查看以下内容，了解react中的虚拟化：

---

还有很多其他库

看起来像是你正在寻找的无限滚动或

反应窗口

如果这是一个简单的列表，这是bvaughn的最新库，更现代/更容易这是我正在使用的第三方API，我描述的格式是如何检索数据，我看不出有什么办法可以在一个请求中获取50个项目？您先执行第一个请求，然后将单个请求所需的信息传递给子级（如url、id等），这些子级仅在呈现时在

componentDidMount

或等效的react hook中执行请求。“然后在一个请求中获取所有数据。”-不同意that@Tehloltractor在这种情况下，您需要坚持客户端优化，这将只渲染您在视口中看到的内容+缓冲区，例如，如果您在屏幕上安装了10个项目，您希望准备15到20个项目，以便在请求缓慢时不会看到闪烁。然后，当您滚动时，为即将到来的项目获取新数据