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 。 我没有测试它们，但它们似乎可以改善整体性能。 如果您不是使用本地数据，而是使用从网络接收的数据，则可能应该查看分页以提高列表速度和（移动）数据使用率