ReactNative Flatlist-Flatlist项目的优化性能

Question

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

我的列表中同时包含图片和文字说明。

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

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属性设置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 3

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