ReactNative Flatlist - Flatlist 项的优化性能

Question

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

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

Answer 1

有多个 npm 包承诺提高默认 react-native flatlist 的性能，例如 https://www.npmjs.com/package/recyclerlistview#demo or https://github.com/stoffern/react-native-optimized-flatlist。我没有测试它们，但它们似乎提高了整体性能。如果您不使用本地数据而是使用从网络接收的数据，也许您应该研究分页以提高列表速度以及（移动）数据使用

Answer 2

react native 里面有一个叫PureComponent的东西。如果您将 FlatList 项目创建为 PureComponent，您会看到很多改进。在数据更改之前，它不会重新呈现项目。

像这样：

class MyListItem extends React.PureComponent {

}

甚至 Nino9612 react-native-optimized-flatlist is also using the same concept, as you can see code of their FlatListItem

建议的库

Answer 3

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

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

我相信您可以做更多的事情，但我就是这样:)

ReactNative Flatlist - Optimization performance of Flatlist items