React Native Expo App 性能非常慢

Posted 2023-02-16

【中文标题】React Native Expo App 性能非常慢

【英文标题】：ReactNative Expo App Very Slow Performance

【发布时间】：2019-12-05 03:38:50

【问题描述】：

我是 react-native 新手，目前正在开发应用程序 所有应用程序都应包含

1- 轮播

2-12 类卡

3- 1 类别页面包含带有图像和一些文本的卡片（卡片数据将从 API 获取）

我正在使用 Expo 应用程序，但在 iPhone 6 中性能非常慢例如 在 iPhone 7 及更高版本上没问题

滚动性能不好 导航性能不好

Project EXPO 二维码链接：https://expo.io/@ov3rcontrol/Weddi Github 项目链接：https://github.com/Ov3rControl/Weddi （随时拉取请求并为提高其性能做出贡献） 如何提高我的 React-Native 应用程序性能？我在这里做错了什么导致了这个性能问题

**编辑 1：我得到警告 1-覆盖 fontFamily 样式属性预处理器

                    2- Each child in a list should have a unique "key" prop   

                    3- VirtualizedList: You have a large list that is slow  

更新 - 确保您的渲染项函数渲染的组件遵循 React 性能最佳实践，例如 PureComponent、shouldComponentUpdate**

编辑 2：React 开发工具

【问题讨论】：

我看到你缺少 FlatList 的 KeyExtractor。见这里：***.com/questions/47953662/…

非常感谢，我做到了，警告已被删除，但就性能而言，应用程序仍然会减慢任何其他想法？ :)

我无法在 Expo 上运行您的应用。 Anw，尝试删除图像并测试性能。它可能会影响渲染过程。但请记住，在 Expo 上运行的应用程序性能总是比独立应用程序差。 iPhone 6 只有 1 GB 内存和 32 位处理器，所以在 Expo 上测试应用程序不是一个好主意

【参考方案1】：

VirtualizedList: You have a large list that is slow 使用分页来解决这个问题。限制数据数组大小来解决这个问题。 Flatlist 将元素逐一渲染，如果元素很多，则性能会很慢。还可以尝试使用一些 flatlist 的优化程序，例如：

removeClippedSubviews initialNumToRender maxToRenderPerBatch windowSize 和布局高度和宽度预先计算，如果它们是静态的：https://facebook.github.io/react-native/docs/flatlist#getitemlayout

https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b

【讨论】：

我正在考虑用 github.com/Flipkart/recyclerlistview 替换平面列表，因为他们说它是为性能而构建的，你觉得呢？

你绝对可以。但请确保通过未解决的问题。由于 flatlist 带有 react native，但 github.com/Flipkart/recyclerlistview 是一个可能有问题的第 3 方库。如果这符合您的期望，那么您就可以开始了。

另请注意，该库已记录：compute height upfront so that RecyclerListView can compute layout in one pass rather than waiting for the draw to happen。我在上面的评论中已经说过，您可能必须计算高度和宽度，并将其提供给 flatlist 以便他们正在执行的快速渲染。

我如何预先计算卡片的高度是否有教程？另外，如果我这样做，它会在所有移动屏幕上都有响应吗？谢谢

这意味着给出静态的高度和宽度。不要使用 onLayout 函数，因为它每次都会被调用，如果你在像 flatlist 这样的渲染器列表中使用它，它会在每次渲染单个列表时被调用。这将导致大量内存问题。 Adding getItemLayout can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify ItemSeparatorComponent.facebook.github.io/react-native/docs/flatlist#getitemlayout