ReactNative Flatlist-Flatlist項目的優化性能

Question

擁有大量數據時如何優化Flatlist的性能。

我的列表中同時包含圖片和文字說明。

我想找到一種方法來提高列表的性能，並刪除從緩存列表中加載的額外圖像並使列表不繁重 。

Answer 1

FlatList組件應該是用於在您的應用程序中顯示大量數據的高性能解決方案。 它僅根據當前可見的項目顯示列表中的某些項目。 也就是說，有一些技巧可以使它更快/更輕

1. 如果您的平面列表項目的高度相同（假設垂直滾動平面列表），這會有所幫助。 在這種情況下，您可以使用getItemLayout屬性設置FlatList的高度，並跳過動態計算https://facebook.github.io/react-native/docs/flatlist#getitemlayout
2. 您可能想嘗試使用removeClippedSubviews道具來查看是否對https://facebook.github.io/react-native/docs/flatlist#removeclippedsubviews有幫助
3. 不要一次加載所有數據，而是在提取調用中使用某種形式的分頁（如果可能）。 然后，您可以使用onEndReached獲取更多數據。
4. 確保您的FlatList僅在應有的時候更新。 我通常在包含FlatList的組件中使用shouldComponentUpdate，以確保它僅在數據更改時更新，而在其他我不關心更改的狀態/ prop變量更改時更新
5. 如果您的FlatList項目包含圖像，則應考慮將其緩存

我敢肯定，您還有更多可以做的事情，但這就是我的意思:)

Answer 2

react native中有一個叫做PureComponent的東西。 如果將FlatList項目創建為PureComponent ，則可以看到很多改進。 在更改數據之前，它不會重新呈現項目。

像這樣的東西：

class MyListItem extends React.PureComponent {

}

這是參考鏈接

甚至Nino9612 react-native-optimized-flatlist建議的庫也使用相同的概念，因為您可以看到其FlatListItem的代碼

Answer 3

有多個npm軟件包有望改善默認的react-native扁平列表的性能，例如https://www.npmjs.com/package/recyclerlistview#demo或https://github.com/stoffern/react-native-optimized -flatlist 。 我沒有測試它們，但它們似乎可以改善整體性能。 如果您不是使用本地數據，而是使用從網絡接收的數據，則可能應該查看分頁以提高列表速度和（移動）數據使用率