在 React 中處理帶有 API 請求的許多組件的加載的最佳方法？

Question

我目前正在 React 中構建一個 SPA，它從某個 API 獲取大約 1000 項數據，並將其顯示在應用程序主頁上的一個大列表中。

API 有一個端點來獲取所有端點，如下所示：

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

在我的應用程序中，我在父組件中獲取這些數據，映射到結果數組，並為每個組件呈現一個組件。 在每個所說的子組件中，我然后調用 'url' 屬性中的端點來獲取該列表項所需的數據。

顯然這意味着同時執行大約 1000 個 API 請求，這絕對不理想。 我正在嘗試找出在頁面上呈現列表項組件的最有效方法，而不會對性能造成巨大損害。

我已經研究了延遲加載，但在渲染具有 API 請求的組件時似乎無法使其工作。 如果可能，我想避免分頁。

Answer 1

首先，您不應該單獨發送每個項目的請求。 您可以做的是發送一組您需要的 id，然后在一個請求中為它們獲取所有數據。 完成后，您渲染組件，如果性能至關重要，您可以使用稱為虛擬化的東西來改進渲染

如果您真的想獲得最佳性能，我建議您使用相同的原則進行延遲加載，例如每個請求 50 個項目，當您向下滾動到底部時，您再加載 50 個等等。 將此與虛擬化相結合，您將獲得非常好的結果

在反應中查看虛擬化： https : //github.com/bvaughn/react-virtualized

還有很多其他的圖書館