vant list无限加载_独家｜React Native 无限列表的优化与实践

导语

本文介绍了在使用 React Native 开发过程中，如何对无限列表组件进行技术选型，如何使用RecyclerListView组件对无限列表进行性能优化，如何解决无限列表与标签页搭配使用时的内存优化与手势重叠的问题，希望对大家有所启发。

背景

对于分类信息流形态的产品，用户通过左右滑动切换分类，通过不断上滑来浏览更多的信息。

用标签页(Tabs)实现切换分类，用无限列表(List)实现上滑浏览 手势上滑，页面向上滚动，展示更多列表项(Lis

因为 React Native(RN) 可以用较低的成本，同时满足用户体验、快速迭代，和跨App开发上线的要求。所以，对于分类信息流形态的产品技术选型使用的是RN。在使用 RN 开发首页的过程中，我们填过很多坑，希望这些填坑经验，对读者有借鉴意义。

第一，RN 官方提供的无限列表(ListView/FlatList)性能太差，一直被业内吐槽。通过实践对比，我们选择了内存管理效率更优的第三方组件——RecyclerListView。

第二，RecyclerListView 需要知道每个列表项的高度，才能正确渲染。如果，列表项高度不确定，怎么处理？

第三，标签页和无限列表组合使用时，会遇到一些问题。首先，标签页中有多个无限列表，怎样有效管理内存？其次，标签页可以左右滑动，无限列表中也有左右滚动的内容组件，二者手势区域重叠时，如何指定组件优先处理？

列表的技术选型

1. ListView

在实践开发分类信息流形态的产品过程中，我们开始尝试过使用 RN，版本是 0.28。当时，无限列表用的是官方提供的 ListView 。ListView 的列表项始终不会被销毁，这会导致内存不断增加，导致卡顿。前100 条信息滚动非常流畅，200 条时就开始卡顿，到 1000 条时就基本就滑不动了。当时，也没有特别好的解决方案，只能在产品上进行妥协，将无限列表降级为有限列表。

2. FlatList

FlatList 是在 RN 0.43 版本新增的，拥有内存回收的功能，可以用来实现无限列表。我们第一时间就跟进了，把 RN 版本进行升级。虽然，FlatList 可以实现无限列表，但体验上总归还是有所欠缺的。FlatList 在 iOS 表现很流畅，但在 Android 某些机型上会有略有卡顿。

3. RecyclerListView

在实践开发中，我们技术选型还尝试采用了 RecyclerListView。RecyclerListView 实现了内存的复用，性能也是更好。无论是iOS 还是 Android 都表现的很流畅。

流畅度对比

衡量流畅度的关键指标是帧率，帧率越高越流畅，越低越卡顿。我们用 RecyclerListView 和 FlatList 分别实现了相同功能的无限列表，在Android 手机中进行了测试，滚动帧率如下。