React Native组件之VirtualizedList

最新推荐文章于 2024-08-16 09:45:30 发布

xiangzhihong8

最新推荐文章于 2024-08-16 09:45:30 发布

阅读量1.9k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/xiangzhihong8/article/details/80943884

版权

React Native 专栏收录该内容

203 篇文章 205 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

React Native的VirtualizedList通过有限的渲染窗口提高列表性能，避免全量渲染导致的内存消耗。它基于ScrollView实现，但不同于原生列表组件，因为RN调用native代码是异步的。VirtualizedList适用于大量数据场景，它会用空白空间代替不在渲染窗口内的元素，以优化内存和性能。当元素滑出可视区，其状态不会保留。该组件继承自PureComponent，若props未发生浅比较变化则不会重新渲染。开发者需要注意key的设置和数据依赖的处理。VirtualizedList提供了如data、getItem、getItemCount等属性，同时也是FlatList和SectionList的基础。

摘要由CSDN通过智能技术生成

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。