在高阶组件的帮助下提高React Native应用的性能

264 阅读6分钟

想提高你的React Native应用程序的性能吗?

阅读这篇文章,了解如何提高React Native应用程序的性能

对于每个应用程序来说,提供良好的性能是必要的。当使用React Native时,你经常会遇到应用程序的性能问题。因此,在开发过程中,你应该注意React Native应用程序的最佳方法和性能提升。

这将有助于你提高性能运行的平稳性。让我们来看看提高性能开发React Native应用的清单吧!

1.确保正确的导航策略

React Native团队长期致力于解决导航问题,并修复了许多问题,但仍有一些困难需要修复,以使大多数应用程序完美运行。所有用户都可以在屏幕之间使用导航。你的应用程序的方式变得很棘手。React Native提供了四种不同的导航方式。

  • iOS导航器
  • 导航器
  • 导航实验
  • React导航

2.避免使用ScrollView来显示巨大的列表。

React Native提供了几种方法来促进可滚动列表的项目。在React Native中执行列表的两种简单方法是使用ScrollView和FlatList元素。

ScrollView很容易执行。它通常用于强调数量有限的元素,如下图所示。然而,所有的子项目将同时显示。当列表中的项目数量足够多时,这种方法效果很好。另一方面,使用数据量巨大的ScrollView会直接影响到React Native应用的性能

图片来源。Codemagic

为了管理列表组成中的大量数据,React Native实现了FlatList。在FlatList中加载项目时,会有延迟。因此,应用程序使用过多或不兼容的内存。FlatList的使用方法如下。

图片来源。Codemagic

3.缩放和调整图像大小

如果你想让你的应用程序显示大量的图形内容或图像,优化图像对开发React Native应用程序的性能非常重要。它的分析和尺寸没有得到适当的优化。这可能会导致你的应用程序因内存拥堵而崩溃。你可以使用一些增强措施来优化React Native应用程序中的图像。

  • 使用PNG而不是JPG
  • 使用低分辨率的图标
  • 对图片使用WEBP--这可以减少图片在iOS和Android上的二进制大小,并减少原始尺寸!

4.利用带有动画库的nativeDriver。

在React Native应用程序中执行动画的最现代的方法之一是使用一个库。在屏幕上开始动画之前,使用nativeDriver通过本地桥分配动画。这允许动画独立于受阻的Java流运行,从而获得更恒定、更丰富的性能,不会出现闪烁或损失。你可以把它设置成如下的样子。

图片来源。Codemagic

5.避免使用箭头函数。

不要在视图渲染函数中使用箭头函数作为回调。在每个视图中使用箭头函数会创建一个该相应函数的不同例子。所以当协商发生时,React Native会比较异常,因为函数引用不匹配;它不能重复使用旧的引用。

图片来源。Codemagic

6.避免过度使用高端组件。

当你的应用程序变得复杂,而你想为你的元素使用简单的模式,你通常会使用高端组件。事实上,使用高端组件是一个很好的做法,尽管这有时会引起争议,因为它能改善间接性。

然而,这将使你的代码更加复杂。真正需要注意的是,不要在眨眼间就把高阶组件实例化,特别是在渲染方法期间。这是因为这个模型会自己生成新的元素。

React Native并不能识别出这是和之前一样的元素。此外,它要求React Native执行所有的生命周期实践。

7.仔细迁移视图。

通过滚动、平移、交替等方式在屏幕上移动视图会重置UI线程的FPS。在图像上放置具有透明背景的文本时尤其如此,或者在其他情况下,使用alpha叠加来重绘每一帧的外观。你会发现,投资shouldRasterizeIOS或renderToHardwareTextureAndroid可以显著提高性能。

然而,如果你想避免过度使用内存,你应该尽量不要过度使用它。使用这些属性来分析你的性能和内存使用情况。如果你不想再移动任何视图,请禁用这个属性。

8.渲染时避免使用匿名函数。

在_render()中组合函数是一个危险的习惯,会在未来造成严重的性能问题。每次组件重新渲染时都会产生一个不同的回调。对于_PureComponents 和_React.memo()_来说,还是一个很大的问题,或者当一个函数作为附件被转移到一个次要元素时,会造成不必要的重复。

9.使用内存优化

本地应用程序在后台运行许多进程,因为不需要Xcode来开发性能。Android Studio有一个Android设备信息员来跟踪应用程序中的泄漏。使用像_FlatListSectionList_ 或_isVirtualList_ 这样的可滚动列表是提高性能的可靠方法。你可以练习以下代码来控制性能和识别内存泄漏。

图片来源。Codemagic

10.使用不受控制的输入

与React监控大多数数据字段的最佳方法不同,在React Native中使用独立输入更有效。在React Native中使用受控数字的一个困难是,在较重的设备上渲染或用户输入非常快时,刷新视图可能会失败。托管的输入必须通过_RNbridge_,因为它可以处理本地流和JavaScript流。

由于认为_RNbridge_的管理限制,使用无人值守的入口是最便宜的方法。这就像删除值属性一样容易。此外,你不需要处理播放器,因为当输入改变时,状态不会改变。

图片来源。Codemagic

11.使用Firebase来监控性能

这项服务是由谷歌提供的,用于获得对你的应用程序的显示属性的洞察力。最好是使用React Native来收集你的应用程序的统计数据和性能数据,然后在Firebase控制台调查和检查这些数据。

一旦你进入跨平台领域,你将无法抗拒React Native的光辉,并提供具有鲜明特点的强大移动解决方案。最后,这个神奇的跨平台框架由于在为通用平台设计优秀的移动应用程序方面表现突出,因此拥有更广泛的用户支持。

如果你想知道如何使用React Native开发应用程序以降低成本,你应该熟悉这个框架的规模,以减少资源和时间的投入,提高开发人员的生产力。

然而,这篇关于提高React原生性能的文章可以带你了解更多关于企业跨平台移动应用开发的复杂性。因此,如果你对你的下一个应用程序有一个独特的想法,那么请与最好的React Native应用程序开发公司取得联系,他们可以根据你的要求为你提供熟练的React Native开发人员