rn 实现上下滑动选择列表_React Native – 列表组件性能分析

RN提供的列表组件

ListView

React Native最早诞生的列表组件，可以方便的用来显示具有纵向滚动属性的数据，实现最基本的两个属性 dataSource 和 renderRow就能让它工作起来。它也支持更多高级的属性，如section和sticky section headers, header，footer，onEndReached等，以及一定的性能优化。为了使ListView滚动更加平滑，在动态的加载一个大的数据(无尽列表)时，可以这样一些优化：

只优化发生变化的列：rowHasChanged就是通过比较数据是否发生变化，来判断ListView的row是否需要重绘。

限定行渲染的速度：默认每次只渲染一行(可以由pageSize属性来控制)，把工作分解为较小的块，以减少渲染时丢帧的几率。

基本用法：

dataSource={this.state.dataSource}

renderRow={(rowData, sectionID, rowID) => this.cell(rowData, rowID)}

/>

但是，ListView在处理无尽列表时，表现却不尽人意，它并不会把视图以外的元素从VirtualDom上面移除，在列表长度长度较大时，滚动时往往出现掉帧情况，内存也占用随着列表的滚动，消耗急剧增加。如下图所示：

静置一段时间后，通过XCode分析看出相比峰值内存没有太多的回收

FlatList && SectionList

可参看源码具体在node_modules/react-native/Libraries