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为假，直到它成功地解决。