ReactNative Flatlist -优化Flatlist项的性能

Question

在大数据量的情况下，如何优化Flatlist的性能。

我的列表有一个图像和一个文本描述。

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

Answer 1

在react本机中有一种叫做PureComponent的东西。如果您将FlatList项创建为PureComponent，则可以看到许多改进。在数据被更改之前，它不会重新添加项目。

就像这样：

class MyListItem extends React.PureComponent {

}

这是参考链接

甚至Nino9612 反应-本机优化-平面图建议的库也使用相同的概念，就像您可以看到它们的FlatListItem代码一样。

Answer 2

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只在应该更新时才更新。我通常在包含shouldComponentUpdate的组件中使用FlatList，以确保它只在数据更改时更新，而不是在我不关心更改的其他状态/支持变量时更新。
5. 如果FlatList项包含图像，则应考虑缓存它们。

我相信你还能做更多的事情，但这就是我的本意:)

Answer 3

有多个npm包承诺提高默认响应的性能-本机平台列表，例如https://www.npmjs.com/package/recyclerlistview#demo或https://github.com/stoffern/react-native-optimized-flatlist。我没有测试他们，但他们似乎提高了整体表现。如果您不使用本地数据，而是使用从网络接收的数据，那么也许您应该查看分页，以提高列表速度和(移动)数据的使用。