在 React Native 中使用 Hermes
发布 React Native 0.64 引入了对 iOS 上 Hermes 的完全选择支持。 这有望成为 React Native 移动应用程序开发生态系统的重大转变。
在本教程中，我们将探索使用 Hermes 作为 React Native 应用程序的 JavaScript 引擎的好处，并演示如何使用 Hermes 构建和运行 React Native 应用程序。 我们将引导您完成必要的步骤，以使用 Hermes 作为 JavaScript 引擎启动和运行您的 React Native 应用程序。
到底是什么？
Hermes 是一个开源 JavaScript 引擎，旨在通过减少应用程序启动时间并将 JavaScript 预编译为高效的字节码来优化性能。
React Native 0.64 中的新功能：Hermes 对 iOS 的支持
由于使用率低，React Native 0.64 的发布附带了对 Android API 级别 16-20 的直接支持。 Hermes 是此版本附带的标题功能。 其他更改包括为 Metro bundler 启用内联 require、使用 Google Chrome 进行 Hermes 跟踪、使用代理支持的 Hermes 以及对 React 17 的其他更改。让我们探讨其中一些可能会影响未来在 React Native 中构建移动应用程序的更改。
爱马仕对 Android 的支持已经活跃了一段时间。 借助 React Native 0.64 中对 iOS 的选择支持，您现在可以构建快速、高效且高性能的证明应用程序。
React Native 0.70 中的进一步补充
根据 React Native 网站上的一篇博文 ，从 React Native 0.70 开始，Hermes 将成为默认引擎。 这对 React Native 开发人员意味着什么可能是他们如何构建和测试移动应用程序的范式转变。 由于高度关注性能优化，很明显开发人员将节省大量开发时间来发布新软件。
以下是 React Native 0.70 中 Hemes 的闯入更改列表：
-
更多关于性能的工作
-
React Native Hermes 集成：未来，Hermes 的新功能将与 React Native 一起构建以确保兼容性
-
iOS Intl：iOS 开发者现在将拥有对 Intl 的原生支持
中阅读更多关于 Hermes 的新功能：Reactive 0.70 您可以在此公告 。
Hermes 对 React Native 好吗？
在 React Native 0.64 中引入 Hermes 作为可选的 JavaScript 编译引擎之后，JavaScript 引擎得到了 React Native 开发者生态系统的巨大支持，主要是由于它的性能。
Hermes 不仅对 React Native 应用程序有好处，而且通过 GUI 在开发过程中可视化应用程序的性能指标，大大减少了包大小、加载时间和消耗大小。 此功能对于开发人员了解应用程序在发布和生产后的性能非常有帮助。
Hermes 是否让 React Native 更快？
简短的回答是肯定的，长的回答是 Hermes 是构建 React Native 应用程序的性能最高的 JavaScript 引擎（根据 React Native 的维护者进行的研究）。 该研究针对开发人员认为重要的三个指标进行：交互时间 (TTI)、二进制大小和消耗大小。
-
交互时间 (TTI) 是从应用程序启动到用户可以与之交互之间的持续时间
-
二进制大小是 APK (Android) 或 APA (iOS) 中捆绑的 React Native 应用程序的大小
-
内存消耗是应用程序安装在设备上后的大小。
这是涵盖该研究的完整文章的链接 。
使用 Hermes 构建应用程序非常简单——只需要三行代码来配置 Hermes 并启动并运行：
use_react_native!( :path => config[:reactNativePath], :hermes_enabled => true )
请注意，iOS 上的 Hermes 仍处于起步阶段，尚未完全稳定。 如果遇到错误，可以访问官方的 React Native GitHub 存储库 来提出问题。
为什么性能优化很重要？
无论您的应用程序仍处于开发阶段还是已部署到生产环境，性能都是构建移动应用程序时需要注意的关键属性之一。 Hermes 弥补了 React Native 中的性能差距。
Hermes 如何提高整体 React Native 性能
在考虑将 Hermes 作为 React Native 应用程序的 JavaScript 引擎之前，让我们了解一下选择 Hermes 作为默认编译引擎的好处：
-
预编译：Hermes 在启动前将应用源代码预编译为字节码
-
更快的 TTI：Hermes 减少了交互时间，从而带来更好的用户体验
-
更小的应用程序包大小：与使用其他 JavaScript 引擎开发的应用程序相比，Hermes 编译的应用程序的大小相当小
以下是爱马仕在幕后的工作方式：
左窗格包含 Hermes 操场上的代码输入，而右窗格将输出显示为字节码。 加载时间也会显示。 在这种情况下，sum 函数需要 60 毫秒来编译和运行。
Hermes 在 React Native 中是如何工作的？
正如我们所讨论的，Hermes 是一个用于 React Native 的 JavaScript 引擎，它将 JavaScript 预编译为高效的字节码以减少构建时间。 Hermes 已证明 APK 体积小，内存减少，并且可以立即启动，从而带来更好的用户体验。
为了更好地了解 Hermes 如何与 React Native 一起工作，您可以按照后续部分中的教程将 Herms 配置为您的应用程序引擎。 但是，如果您使用的是 React Native 0.70，Hermes 将是您的默认设置，因此您可以跳到本博客的调试部分。
在 React Native 中使用 Hermes
在本教程中，我们将向您展示如何构建一个相当简单的 React Native 应用程序来显示来自模拟数据的天气信息。 该应用程序将显示美国当前的天气预报。
完成的应用程序应如下所示：
在开始之前，请确保您使用的是 React Native ≥0.64 。
要创建一个新的 React Native 项目，请通过终端导航到您的工作目录并复制/粘贴以下代码：
npx react-native init WeatherApp
在 Android 上启用爱马仕
要在 Android 上启用 Hermes，请在您首选的代码编辑器中打开新创建的项目并更新您的 android/app/build.gradle文件看起来像这样：
project.ext.react = [ entryFile: "index.js", enableHermes: true ]
接下来，使用以下代码在 Android 上运行该项目：
$ npx react-native run-android
谷歌翻译打不开了怎么办？Google Translate不再向大陆提供翻译服务
在 iOS 上启用 Hermes
要在 iOS 上启用 Hermes，请在首选代码编辑器中打开新创建的项目并更新 Podfile， 放 hermes_enabled. 请参阅下面的代码片段：
use_react_native!( :path => config[:reactNativePath], :hermes_enabled => true )
接下来，运行 pod install。
$ cd ios && pod install
最后，使用以下代码运行您的 iOS 应用程序：
>$ npx react-native run-ios
您的应用应如下所示：
您会注意到 Hermes 在右上角被标识为应用程序的引擎。 这表明爱马仕正在积极运行。
现在我们已经完成了 Hermes 的设置，让我们继续构建我们的应用程序。
使用 Hermes 支持构建 React Native 应用程序
首先，从 Github:
$ git clone https://github.com/emmanueletukudo/herms-starter.git
替换里面的内容 Home屏幕显示以下代码：
import React from "react";
import {StyleSheet, Text, Image, View, TouchableOpacity, FlatList} from "react-native";
import axios from "axios";
import {data, icons} from "../constants/"
const Home = () => {
const [weatherData, setWeatherData] = React.useState([
{
id: 0,
city: "New York",
temp: 283.88,
main: "Clouds",
icon: icons.thunder,
description: "overcast clouds",
},
{
id: 1,
city: "San Francisco",
temp: 285.52,
main: "Rain",
icon: icons.rainy,
description: "broken clouds",
},
{
id: 2,
city: "Chicago",
temp: 283.88,
main: "Rain",
icon: icons.metro,
description: "overcast clouds",
},
]);
function renderWeather(item, index){
return(
{item.city}
{item.main}
{item.temp}
)
}
return(
item.id.toString()}
renderItem ={({item, index}) => renderWeather(item, index)}
/>
)
}
const styles = StyleSheet.create({
constainer: {
flex: 1,
backgroundColor: "#000",
alignItems: "center",
padding: 70,
},
weatherContainer: {
width: 350,
justifyContent: "center",
marginHorizontal: 14,
backgroundColor: "#000",
},
hello:{
flex: 1,
alignItems: "center",
fontSize: 12,
fontWeight: "700",
color: "#000"
},
weatherDtails1:{
flex: 1,
justifyContent: "center",
marginTop: "20%",
borderRadius: 10,
marginRight: 15,
paddingRight: 12,
paddingBottom: 12,
},
temp: {
color: "#ffffff",
fontSize: 14,
fontWeight: "700",
},
main:{
color: "#ffffff",
fontSize: 14,
marginTop: 15
},
city:{
color: "#ffffff",
fontSize: 40,
fontWeight:"700"
},
weatherDetails: {
fontSize: 17,
fontWeight: "400",
},
weatherDetailsWrapper: {
flexDirection: "column",
alignContent: "center",
marginTop: "40%",
},
icon: {
top: "10%",
width: 200,
height: 200,
}
})
export default Home;
代码是不言自明的。 我们有三个部分： React的模拟数据 useStatehook ，将数据渲染到 React 组件中的函数，以及将数据渲染到 React 组件中的代码 Home使用 React Native 的组件 FlatList. 您可以采用相同的方法从 API 获取实际数据，但这超出了本教程的范围。
在 Chrome 中调试 React Native 应用程序
支持通过 Chrome DevTools Hermes通过实现 Chrome 检查器协议 调试 JavaScript。 Chrome 通过它当前正在侦听的端口连接到 Metro，因此您需要知道 Metro 正在侦听的端口。 Metro 默认侦听端口 8181，因此您可以通过浏览器使用 http://localhost:8081.
确定应用程序运行的端口后，在 Chrome 上打开一个新的水龙头并输入 chrome://inspect. 单击 配置... 按钮以添加您的应用 Metro 服务器地址（例如， http://localhost:8081).
在弹出的modal上添加地址：
你现在应该可以使用 Chrome DevTools 调试你的 React Native 应用了。 要访问调试器，请单击 Inspect 。
结论
得益于轻量级 JavaScript 引擎 Hermes，在 React Native 中移动应用程序的性能优化变得更加容易。