performance - ReactNative Flatlist - Flatlist 项的优化性能

Question

当我们有大数据时如何优化 Flatlist 的性能。

我的列表既有图片又有文字说明。

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

Answer 1

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

1. 如果您的平面列表项具有相同的高度(假设垂直滚动平面列表)，它会有所帮助。在这种情况下，您可以使用 getItemLayout 属性来设置 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 以确保它仅在其数据更改时更新，而不是在我不关心的其他一些状态/ Prop 变量更改时更新
5. 如果您的 FlatList 项目包含图像，您应该考虑缓存它们

我相信您可以做更多的事情，但仅此而已:)