滚动加载(懒加载)react-infinite-scroll-component

当请求数据量过大时，接口返回数据时间会很长，数据回显时间长，Dom 的渲染会有很大的性能压力。

antd的list组件中有提到一个滚动加载的组件库react-infinite-scroll-component

能够实现滚动加载，这样我们就可以写成懒加载的模式，一次只请求几条，滚动的时候再请求几条叠加上去。

Antd：https://ant.design/components/list-cn/

github：https://github.com/ankeetmaini/react-infinite-scroll-component

npm：https://www.npmjs.com/package/react-infinite-scroll-component

首先yarn或者npm安装

yarn add react-infinite-scroll-component

引用（js，jsx，tsx）

import InfiniteScroll from 'react-infinite-scroll-component';

组件调用（例如）:

 这个组件的一些API方法调用：

参数	类型	含义
dataLength	number	数据列表长度（当前已经加载出来的）
next	function	滚动加载请求数据的方法
hasMore	boolean	判断是否还有更多的数据加载（false时next不会触发） total是要加载的所有数据总数
loader	node	加载时可以设置一个加载器组件来显示
endMessage	node	所有数据加载完之后底部可以设置一个组件来提示加载完成
scrollableTarget	node or string	使用这个组件的DOM节点的id（并且已经提供滚动条）
scrollThreshold	number | string	默认值是80%（0.8），在接近底部20%的区域触发next
onScroll	fucnction	添加滚动事件

简单的使用差不多就这些， 还有一个rc-virtual-list 可以加载无限长的列表，这个具体还没了解过，好像是按照可视区域加载。