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

标签 performance react-native react-native-flatlist

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

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

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

最佳答案

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 项目包含图像,您应该考虑缓存它们

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

关于performance - ReactNative Flatlist - Flatlist 项的优化性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52217044/

相关文章:

android - 为什么我的 React Native 应用程序需要圆形图标?

android - React Native - 为什么我的项目文件夹占用了这么多空间?

javascript - 如何创建逆向 react 门户

database - VIEW 与 SQL 语句的性能

java - 欧拉计划 35 : HashSet gives incorrect results

react-native - 如何取回 "node_modules"文件夹内容

reactjs - React-Native 如何处理来自平面列表中项目的 onPress ???

react-native - 添加新项目时防止 FlatList 滚动

React-Native Scrollview 和 FlatList 的滚动冲突

C指针运算效率