React Native在0.43版本之前寫(xiě)列表需要使用ListView，ListView存在性能問(wèn)題后豫，API也不友好，所以官方在0.43版本推出了FlatList突那，有如下優(yōu)點(diǎn)：
- API更加友好和豐富挫酿；
- 性能好很多；
所以我寫(xiě)了一個(gè)長(zhǎng)列表Demo來(lái)測(cè)試下兩者性能對(duì)比(測(cè)試環(huán)境是MacBook Air的iphone8plus模擬器愕难，關(guān)閉了remotedebug)早龟。
ListView without removeClippedSubviews vs FlatList:
- 內(nèi)存：ListView在上下滾動(dòng)的時(shí)候內(nèi)存從200M 漲到了1個(gè)G 還不止(我覺(jué)得ListView最大的性能問(wèn)題是上下滾動(dòng)的時(shí)候內(nèi)存不會(huì)被回收，會(huì)無(wú)限增大)猫缭，但是FlatList無(wú)論你怎么滾動(dòng)葱弟，都可以穩(wěn)定在320M！
- CPU：ListView在上下滾動(dòng)的時(shí)候CPU峰值達(dá)到160%猜丹，但是FlatList穩(wěn)定在50%左右芝加。
ListView with removeClippedSubviews(ListView開(kāi)啟設(shè)置定高并且overflow：hidden即可) vs FlatList：
- 內(nèi)存：ListView的峰值是135.8M，F(xiàn)latList是265M射窒。之所以FlatList高是因?yàn)閣indowSize默認(rèn)為21藏杖，渲染了一些可視區(qū)之外的元素所以?xún)?nèi)存占用較高，當(dāng)我把windowSize設(shè)置為10的時(shí)候內(nèi)存占用降低到了160M脉顿。
- CPU：ListView在上下快速滾動(dòng)的時(shí)候峰值達(dá)到200%蝌麸，但是FlatList峰值最高是80%。(其實(shí)CPU峰值和滑動(dòng)列表速度有關(guān)艾疟，但是基本上可以看到無(wú)論哪種情況ListView的CPU峰值是FlatList的2~3倍左右)
如果要寫(xiě)出高性能的FlatList需要注意：
- renderItem中的組件最好是無(wú)狀態(tài)組件来吩，不要放內(nèi)存state敢辩。
- 使用keyExtractor指定一個(gè)key，不要使用索引弟疆，尤其是存在列表的增刪的情況下戚长。
- 如果你不需要渲染就知道每一行的高度的話(huà)，那么getItemLauout是一個(gè)非常有用的優(yōu)化方案兽间。
- 使用合適的windowSize在內(nèi)存和流暢性之間達(dá)到平衡历葛。
