React Native FlatList vs ListView

Question

「改爲使用新的FlatList或SectionList組件，除了簡化API之外，新的列表組件還具有顯着的性能增強功能，主要的功能是爲任意數量的行提供幾乎不變的內存使用情況。」

這是在React Native官方文檔中陳述的。但是，無論我嘗試多麼努力，FlatList內存使用只會在滾動時保持高速上升。與使用少量內存的ListView組件相比。

Answer 1

TLDR

創建PureComponent在renderItem使用： class ListItem extends React.PureComponent

然後，你需要確保你實施shouldComponentUpdate

我也似乎有性能問題當我有一個FlatList內ScrollView

所以我一直在搞這個這一整天，試圖弄清楚爲什麼FlatList吹出我的RAM使用率，並吸乾我的電池幹幾千名名單。我看到的是renderItem被多次調用每個項目。如果我有100個項目，則renderItem將被調用一次，用於項目1-10，然後再次用於項目1-10，用於項目10-20，然後再用於項目1-20，以及用於項目20-30，等等。這讓我感到困惑，爲什麼會發生這種情況。但是我意識到，沒有任何優化就意味着它正在重建列表中的每一項，並且呈指數級增長。爲了解決這裏這個問題是你需要做的：

創建PureComponent像他們在文檔中建議的優化： class ListItem extends React.PureComponent

然後你實現shouldComponentUpdate

一旦我做了你需要確定我的JS FPS和RAM的使用率保持不變，直到我滾動時出現了一些下降和尖峯，但重要的部分是他們回到了一個不錯的水平。這與之前我從JS看到1 FPS和超過一定內存使用情況的比較。

FlatList似乎渲染儘可能多的項目，並且距離可見項目越遠，渲染項目的優先級越低。它可以將不在屏幕上的項目保存爲虛擬形式，以便在用戶滾動時可以立即將其推送到屏幕上。如果不優化組件渲染方法，這可能導致大型列表的內存使用失控。