React Native Flatlist - Flat List项目的优化性能

Question

How to optimize performance of Flatlist when we have large data.

我的列表包含图像和文本说明。

我想找到一种方法来提高列表的性能，并删除从缓存列表加载的额外图像，并使列表不重。

Answer 1

有一种叫做PureComponent的东西。如果你创建你的FlatList项目为PureComponent，你会看到很多改进。它不会重新呈现项目，直到数据已更改。

像这样的东西：

class MyListItem extends React.PureComponent {

}

Here is reference link

甚至Nino9612 react-native-optimized-flatlist建议的库也使用相同的概念，因为你可以看到他们的FlatListItem的代码

Answer 2

FlatList组件应该是一个高性能的解决方案，用于在您的应用程序中显示大型数据列表。它仅根据当前可见的项目显示列表中的某些项目。也就是说，有一些技巧可以帮助它更快/更轻

1. 如果您的平面列表项具有相同的高度（假设垂直滚动平面列表），它会有所帮助。在这种情况下，您可以使用getItemLayout prop来设置FlatList的高度并跳过动态计算https://facebook.github.io/react-native/docs/flatlist#getitemlayout
2. 您可能想尝试使用removeClippedSubviews prop来查看它是否有助于https://facebook.github.io/react-native/docs/flatlist#removeclippedsubviews
3. 不要一次加载所有数据，但在提取调用中使用某种形式的分页（如果可能）。然后，您可以使用onEndReached获取更多数据。
4. 确保您的FlatList仅在应该更新时更新。我通常在包含FlatList的组件中使用shouldComponentUpdate，以确保它只在数据更改时更新，而不是在我不关心的其他某个state / prop变量时更新
5. 如果FlatList项目包含图像，则应考虑缓存它们

我相信你还能做更多的事情，但那是我的意思:)

Answer 3

有多个npm软件包有望提高默认的react-native flatlist的性能，例如https://www.npmjs.com/package/recyclerlistview#demo或https://github.com/stoffern/react-native-optimized-flatlist。我没有测试它们，但它们似乎提高了整体性能。如果您不使用本地数据但使用从网络接收的数据，您可能需要查看分页以提高列表速度以及（移动）数据使用情况