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：本文首發在簡書。