ReactJs Lazy loader

Question

我是ReactJs的新手。

当页面向下滚动时，我的应用程序中需要一个延迟加载器， 我正在使用（https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn）

实际上，这工作正常，但第一次加载所有数据。

我希望在页面向下滚动时进行api调用并设置数据。

谢谢。

Answer 1

您最需要的是无限滚动功能。在加载异步数据时，React有一些很好的选择：

1）如果您需要高性能（来自服务器的大量结果），您可以尝试react-infinite。正如文档所说：

  

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设置为false，直到成功解析为止。