DZone>Web Dev Zone>经过验证的优化React Native App性能的技巧
经过验证的优化React Native应用程序性能的技巧
对于现代移动应用开发者来说，React Native是开发跨平台应用的最有前途和可行的框架。
通过
-
May.04, 22 - Web Dev Zone -代码摘录
喜欢 (4)
评论
保存
鸣叫
3.23K浏览次数
加入DZone社区，获得完整的会员体验。
对于现代移动应用开发者来说，React Native是开发跨平台应用的最有前途和可行的框架。自从该框架推出以来，它从未淡出人们的视线，并超越了所有其他的移动应用开发框架。
然而，由于React Native 是一个新的应用程序开发框架，开发人员在某些情况下面临着提高其性能的困难。当一个应用程序需要更多的标签、并行处理、更多的控件、动画、导航以及包含第三方库时，该框架会变得很慢。然而，由于React Native社区人们的不断努力，该框架即将根据开发者不断增长的需求而不断发展。
React Native
这篇博客说明了开发者在使用React Native时所面临的常见性能问题，并简要介绍了如何优化这些问题。
什么是React Native？为什么它如此受欢迎？
在深入探讨核心话题之前，让我们先了解一些基础知识。
React Native是一个基于Facebook JS库的JavaScript（JS）框架，用于构建强大的UI。然而，这里它专注于在移动平台上构建UI，而不是针对浏览器。简单地说，跨平台的应用开发框架React Native使网络开发者能够构建一个原生的移动应用。不管开发者是为安卓还是iOS平台开发应用，通过使用React Native框架，他们可以很容易地在平台之间共享代码。
除了安卓和iOS这些移动平台外，React Native还有可能为未来的平台开发应用程序。React Native的高效代码共享功能使应用开发者能更快地开发移动应用。作为一个开源框架，并有大量的社区支持，React Native在全球开发者中非常受欢迎。
使用React Native开发应用程序的好处
以下是应用开发者通过使用React Native应用开发框架可以享受的主要优势。
- 代码可重用性。 使用React Native框架的移动应用程序开发人员可以在多个平台上反复使用使用的代码。这消除了在多个平台上重新创建相同代码的工作。这使开发者能够通过使用相同的代码来节省大量时间，从而快速构建高效的移动应用程序。React原生框架甚至允许开发者在移动应用开发中利用使用React编写的Web应用代码。
- 允许实时改变代码。R eact原生框架提供的热和实时重载功能允许开发人员实时改变代码。这使得开发和测试过程更容易。实时重载功能允许应用程序在代码更改后立即重新加载整个应用程序。然而，热重载功能允许重载进行了更改的特定区域。
- 支持第三方插件。R eact Native框架仍在不断发展，开发者可能需要一些更多的功能和特性来满足特定的业务需求。为了解决这些问题，该框架提供了2种基于JS和Native的模块来支持第三方插件。
提高React Native应用程序性能的技巧
以下是使用React Native开发的移动应用程序的性能改进和实践清单。
1.用FlatList代替ScrollView来显示长项目
为了显示长的项目列表，开发者可以利用 "Flatlist "而不是使用 "Scrollview"。尽管Scrollview是一种显示长列表项的复杂方式，但它会降低应用程序的整体性能。
然而，在'Flatlist'的情况下，它只显示必要的项目集，而消除了其他项目。正因为如此，它利用了低内存，提高了应用程序的性能。
FlatList代码格式。
<FlatList
data={elements}
keyExtractor={item => `${items.name}`}
renderItem={({ item }) => <Item key={item.name.toString()} />}
/>
2.如果应用程序不需要额外的依赖性，请删除控制台语句
移动应用程序开发人员使用控制台语句来调试JS代码，一旦调试过程完成，就应该在捆绑之前删除。否则，它将在JavaScript线程中造成很大的混乱，并导致不必要的重新渲染。
开发人员可以使用这段代码来跟踪，一旦调试过程完成，就从源代码中删除控制台语句。
npm install babel-plugin-transform-remove-console
OR
yarn add babel-plugin-transform-remove-console
3.优化图像
图像优化在提高应用程序的性能方面起着巨大的作用。使用大尺寸和大量的图形图像会消耗更多的内存，并可能导致应用程序崩溃。
以下是开发者可以采取的步骤，以优化应用程序的图像大小
- 将图片格式改为JPG
- 使用较小分辨率的图像
- 使用WEBP格式的图像来减少图像大小
此外，开发人员可以使用图像缓存技术，在本地缓存图像，以提高应用程序的性能。
4.使用Nativedriver制作动画
开发者可以选择动画API来为应用程序制作动画，而不是使用JS线程来运行动画。利用使用 "NativeDriver "的 "动画库 "可以帮助动画文件独立启动而不影响JS线程。
通过这样做，使用React Native开发的应用程序可以更顺畅地运行动画文件，获得更丰富的体验。
动画API的Nativedriver配置代码。
import React, {useRef} from ‘react’
import {Animated} from ‘react-native’
const App = () =>{
const opacity = useRef(new Animated.value(0)).current
const showVal = () =>{
Animated.timing(opacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
}
…
return (
<View>
<Animated.View>
<Animated.Text>Text to show</Animated.Text>
</Animated.View>
<Button title=”Show” onPress={showVal} />
</View>
)
}
5.使用Hermes优化你的应用程序
开发人员通过使用开源的JavaScript引擎 "Hermes "来优化他们的移动应用程序。通过使用这个JS引擎，开发者可以轻松地减少App的APK文件大小和应用程序的内存消耗。此外，Hermes还能减少使用React Native开发的移动应用程序的交互时间（TTI）。
在build.gradle下启用Android中的Hermes的代码格式。
def enableHermes = project.ext.react.get("enableHermes", true);
在iOS中启用Hermes的代码格式在Podfile下。
use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true
底线
好了，上面列出的关于优化React Native性能问题的提示可以解决开发者所面临的大约一半的问题。几乎所有React Native的性能问题都可以通过一点点的背景工作来解决。这篇文章提供了一些关于提高你对React Native框架的认识和改善其性能的启示。
JavaScript React Native 开发 框架 移动应用 React (JavaScript库)
经Heena Soni许可发表于DZone。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
