React Native组件之VirtualizedList
2023-09-27 14:22:50 时间
React Native(简称RN)列表是基于ScrollView实现的,也就是可以滚动的,然而RN并没有直接使用IOS或Android的原生列表组件,这是因为RN真正调用native代码的过程是异步的,二Native的渲染要求必须同步渲染的。
在早期版本中,对于列表情况RN采用的是ListView组件,和Android一样,早期的ListView组件性能是非常的差的,在后来的版本中,RN提供了系列用于提高列表组件性能的组件:FlatList和SectionList。FlatList和SectionList都是基于VirtualizedList实现的。
读者可以在项目的“node_modules/react-native/Libraries/Lists/XXX”文件夹下找到相关的源码。一般来说,FlatList和SectionList已经能够满足常见的开发需求,仅当想获得比FlatList 更高的灵活性(比如说在使用 immutable data 而不是普通数组)的时候,才会应该考虑使用VirtualizedList。
VirtualizedList
VirtualizedList通过维护一个有限的渲染窗口(其中包含可见的元素),并将渲染窗口之外的元素全部用合适的定长空白空间代替的方式,极大的改善了内存消耗以及在有大量数据情况下的使用性能(类似于Android的ListView的界面复用机制)。
当一个元素离可视区太远时,它的渲染的优先级较低,否则就获得一个较高的优先级,VirtualizedList通过这种机制来提高列表的渲染性能。在使用VirtualizedList赢注意以下几点:
- 当某行滑出渲染区域之外后,其内部状态将不
相关文章
- uniapp - msg组件
- 第二十三节: EF性能篇(三)之基于开源组件 Z.EntityFrameWork.Plus.EF6解决EF性能问题 第四节:一些指令总结 定时调度系列之Quartz.Net详解 第十七节:易混淆的概念(静态和非静态、拆箱和装箱) 那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
- react-native 常用组件的用法(一)
- 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧
- 从零开始的react入门教程(六),一篇文章理解react组件生命周期
- Flutter3.7版本新增组件-Menu菜单系列介绍
- React Native 项目常用第三方组件汇总
- React 组件
- React组件间通信(常用方式,简单易用)
- Flutter 教程之高效且精美的滚动组件Slivers (教程含源码)
- SPA单页应用的2种类型分页技术(React、Vue等组件化开发)
- react路由组件&&非路由组件
- React非受控组件
- React函数式组件的性能优化
- 微信小程序之圆形进度条(自定义组件)
- React的组件模式
- Android深入四大组件(四)Android8.0 根Activity启动过程(前篇)
- Unity 基础 之 代码动态监听UI交互组件汇总