ReactJs懶惰裝載機

Question

我是ReactJs中的新成員。

我需要在我的應用程序中的延遲加載時，頁面滾動下來， 我使用（https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn）

其實，這是工作的罰款，但第一次加載所有數據。

我想在頁面向下滾動時進行api調用和設置數據。

謝謝。

Answer 1

很可能您需要的是無限滾動功能。 React在加載異步數據時有一些很好的選擇：

1）如果您需要高性能（來自服務器的大量結果），您可以嘗試react-infinite。作爲文檔說：

通過渲染無限做出反應解決了這個唯一的DOM節點用戶 能夠看到或可能很快就會看到。

2）另一種簡單的辦法是：react-infinite-scroller

一般原則，使這些庫的工作是通過他們的道具，這將讓模塊知道什麼時候提出要求或當等待。

<InfiniteScroll 
    pageStart={0} 
    loadMore={loadFunc} 
    hasMore={true || false} 
    loader={<div className="loader">Loading ...</div>} 
> 
    {items} // <-- This is the content you want to load 
</InfiniteScroll> 

loadFunc將作出API調用到服務器，將設置hasMore爲假，直到它成功地解決。