zl程序教程

您现在的位置是:首页 >  工具

当前栏目

React Native组件之VirtualizedList

组件React native
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赢注意以下几点:

  • 当某行滑出渲染区域之外后,其内部状态将不