当请求数据量过大时,接口返回数据时间会很长,数据回显时间长,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 可以加载无限长的列表,这个具体还没了解过,好像是按照可视区域加载。