ListView 组件介绍

分页

除了简单的渲染之外，另外一个要考虑的问题就是当数据量很大的时候如何分页加载。这种情形分两种情况考虑：

1. 数据一次性拿到，边滚动边加载
2. 数据不是一次性拿到，而是有可能分屏取数据

对于第一种情况，在 ListView 内部其实已经做了分页的处理：

• ListView 内部通过curRenderedRowsCount状态保存已渲染的行数；
• 初始状态下，要加载的数据条数等于initialListSize（默认为 10 条）；
• 在滚动时检测当前滚动的位置和最底部的距离，如果小于scrollRenderAheadDistance(默认为 1000)，就更新curRenderedRowsCount，在它原有值基础上加pageSize个（默认为 1 条）；
• 由于属性变化，触发了 ListView 重新的 render 。在渲染过程中，curRenderedRowsCount起到截断数据的作用，React 的 diff 算法使得只有新加入的数据才会渲染到了界面上。

整个过程类似于 Web 端懒加载机制，即每次在和底部的距离达到一个阈值时，加载接下来的 pageSize 个数据。

对于第二种情况，ListView 提供了相关的属性：

• onEndReachedThreshold，在滚动即将到达底部时触发；
• onEndReached，在已经到达底部时触发；

我们可以在这两个方法中调用接口去拿数据，取到数据后再更新数据源。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!