ListView vs FlatList性能对比

React Native在0.43版本以前写列表须要使用ListView，ListView存在性能问题，API也不友好，因此官方在0.43版本推出了FlatList，有以下优势：

• API更加友好和丰富；
• 性能好不少；

因此我写了一个长列表Demo来测试下二者性能对比(测试环境是MacBook Air的iphone8plus模拟器，关闭了remotedebug)。

ListView without removeClippedSubviews vs FlatList:

• 内存：ListView在上下滚动的时候内存从200M 涨到了1个G 还不止(我以为ListView最大的性能问题是上下滚动的时候内存不会被回收，会无限增大)，可是FlatList不管你怎么滚动，均可以稳定在320M！
• CPU：ListView在上下滚动的时候CPU峰值达到160%，可是FlatList稳定在50%左右。

ListView with removeClippedSubviews(ListView开启设置定高而且overflow：hidden便可) vs FlatList：

• 内存：ListView的峰值是135.8M，FlatList是265M。之因此FlatList高是由于windowSize默认为21，渲染了一些可视区以外的元素因此内存占用较高，当我把windowSize设置为10的时候内存占用下降到了160M。
• CPU：ListView在上下快速滚动的时候峰值达到200%，可是FlatList峰值最高是80%。(其实CPU峰值和滑动列表速度有关，可是基本上能够看到不管哪一种状况ListView的CPU峰值是FlatList的2~3倍左右)

若是要写出高性能的FlatList须要注意：

• renderItem中的组件最好是无状态组件，不要放内存state。
• 使用keyExtractor指定一个key，不要使用索引，尤为是存在列表的增删的状况下。
• 若是你不须要渲染就知道每一行的高度的话，那么getItemLauout是一个很是有用的优化方案。
• 使用合适的windowSize在内存和流畅性之间达到平衡。

PS：本文首发在简书。