08｜List：如何实现高性能的无限列表？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Native中的列表组件性能优化问题一直备受关注。本文深入探讨了在处理无限列表时的性能挑战，并提出了解决方案。作者首先指出了早期使用的ListView组件存在的性能问题，随后对比了官方提供的FlatList和开源社区提供的RecyclerListView的性能差异。文章重点介绍了RecyclerListView的性能优势和底层实现原理，强烈推荐开发者使用RecyclerListView来提升无限列表的性能。此外，还详细介绍了FlatList和RecyclerListView的原理和优化方法，强调了RecyclerListView在内存和计算量上的优势。对于React Native开发者来说，这是一篇值得深入阅读的技术文章，通过对比ScrollView、FlatList和RecyclerListView的底层原理和性能特点，强调了RecyclerListView在内存和计算量上的优势，建议开发者优先使用RecyclerListView来提升无限列表的性能。
《React Native 新架构实战课》，新⼈⾸单¥59
全部留言(13)
- 最新
- 精选
卯熙老师， 按需渲染组件，数据还需要分页加载吗？是不是可以不用分页加载，一次性把数据请求回来，它会自动按需渲染。作者回复: 不建议一次请求回来。 1. 无限列表，理论上页码是无限的，不可能一次请求回来。因此，还需要对请求的数据进行分页。 2. 推荐使用 react query，帮你做列表的状态管理，只需配置一下就能帮你自动管理无限列表的分页。
2022-05-011
山文宋老师，有比较好的RN的书或者资料推荐吗？作者回复: 在生态篇的《React Native Awesome》会有介绍。
2022-04-131
持续思考持续做的牛牛现在新架构里面分支，0.68，有相应的listview优化么？怎么看不到对应的scrollview os库？rrc_scrollview这个组件是还没有完成么？作者回复: 只能重构了 ListView ，目前不支持复用，性能太差。
2022-04-25- 持续思考持续做的牛牛对于item高度会变化的，能适配么？
作者回复: 可以。12讲的 Github 上有代码。
2022-04-25 
dao作业 1， https://github.com/hdouhua/hybrid-mobile-app/tree/main/AwesomeProject/src/c08 2， 新手，工作中没有使用过，作业中有下面两个问题，请老师帮忙解答。 一，设置 loading 属性会引起 RecyclerListView 重新渲染 二，屏幕下方 “加载更多” 按钮，屏幕有一点抖动作者回复: 给动手能力点赞👍 一、会引起 RecyclerList 组件的 re-render，但不会引起 ListItem 组件的 re- render ，你可打日志试试。 二、 {loading && <Loading />}，引起了高度的改变，所以有抖动。loading 状态只改变文案内容，不控制元素出现和消失就不会引起高度改变。
2022-04-212
geeklyc
老师，有支持多列，瀑布流的不。RecyclerListView作者回复: 有，见 11 讲和 12讲
2022-04-15
Geek_e4a05bRecyclerListView 在安卓底端机上暴力滑动底部有可能有闪动情况。RecyclerListView如果卡片高度不固定需要提前计算卡片高度，这个可能会牺牲展示时间。Flatlist可以通过指定windowSize来减少白屏出现，感觉性能比之前好很多了。作者回复: 你是小飞侠？ 是的，现在性能越来越好了，但我还是推荐 RecyclerListView，因为低端机加载可能还是会遇到渲染 windowSize 多屏的白屏问题。
2022-04-13
Luvian现在有一个新的flashList，原理和recycleList差不多，但是使用更简单2023-07-25归属地：上海
Duke最后一个列表项可枚举是什么意思？2022-11-16归属地：陕西1
IRONMAN你好，这个是我写的rowRenderer的函数: const _rowRenderer = (type,data)=>{ console.log(data,data.name) //编写如何渲染数据 return ( <View style={{height:100}}> <Text >data</Text> </View> ) } 但是在模拟显示的时候却报错： LayoutException: RecyclerListView needs to have a bounded size. Currently height or, width is 0.Consider adding style={{flex:1}} or, fixed dimensions 我明明已经明确了每一个列表项的height，为什么还会报错？但是一旦我重新刷新之后，报错就消失了，但是控制台中并没有打印我在rowRenderer函数中中指定的信息，所以为什么rowRenderer函数没有被调用？2022-06-29