使用 Hermes

Hermes 是一个针对 React Native 优化的开源 JavaScript 引擎。对于许多应用来说，与 JavaScriptCore 相比，使用 Hermes 将缩短启动时间、减少内存使用量并缩小应用大小。React Native 默认使用 Hermes，无需额外配置即可启用它。

¥Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. Hermes is used by default by React Native and no additional configuration is required to enable it.

打包 Hermes

¥Bundled Hermes

React Native 附带了 Hermes 的打包版本。每当我们发布新版本的 React Native 时，我们都会为你构建一个版本的 Hermes。这将确保你使用的 Hermes 版本与你正在使用的 React Native 版本完全兼容。

¥React Native comes with a bundled version of Hermes. We will be building a version of Hermes for you whenever we release a new version of React Native. This will make sure you're consuming a version of Hermes which is fully compatible with the version of React Native you're using.

从历史上看，我们在将 Hermes 版本与 React Native 版本匹配时遇到过问题。这完全消除了这个问题，并为用户提供了一个与特定 React Native 版本兼容的 JS 引擎。

¥Historically, we had problems with matching versions of Hermes with versions of React Native. This fully eliminates this problem, and offers users a JS engine that is compatible with the specific React Native version.

这一变化对于 React Native 的用户来说是完全透明的。你仍然可以使用本页中描述的命令禁用 Hermes。你可以在此页面上阅读有关技术实现的更多信息。

¥This change is fully transparent to users of React Native. You can still disable Hermes using the command described in this page. You can read more about the technical implementation on this page.

确认 Hermes 正在使用

¥Confirming Hermes is in use

如果你最近从头开始创建了一个新应用，你应该在欢迎视图中查看 Hermes 是否已启用：

¥If you've recently created a new app from scratch, you should see if Hermes is enabled in the welcome view:

Where to find JS engine status in AwesomeProject

JavaScript 中将提供 HermesInternal 全局变量，可用于验证 Hermes 是否正在使用：

¥A HermesInternal global variable will be available in JavaScript that can be used to verify that Hermes is in use:

const isHermes = () => !!global.HermesInternal;

提醒

如果你使用非标准方式加载 JS 包，则 HermesInternal 变量可能可用，但你没有使用高度优化的预编译字节码。确认你正在使用 .hbc 文件，并对之前/之后的情况进行基准测试，如下所述。

¥If you are using a non-standard way of loading the JS bundle, it is possible that the HermesInternal variable is available but you aren't using the highly optimised pre-compiled bytecode. Confirm that you are using the .hbc file and also benchmark the before/after as detailed below.

要了解 Hermes 的优势，请尝试对你的应用进行发布构建/部署以进行比较。例如;从项目的根目录开始：

¥To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example; from the root of your project:

Android
iOS

npm
Yarn

npm run android -- --mode="release"

yarn android --mode release

npm
Yarn

npm run ios -- --mode="Release"

yarn ios --mode Release

这将在构建时将 JavaScript 编译为字节码，从而提高应用在设备上的启动速度。

¥This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device.

使用 Google Chrome 的 DevTools 调试 Hermes 上的 JS

¥Debugging JS on Hermes using Google Chrome's DevTools

Hermes 通过实现 Chrome 检查器协议来支持 Chrome 调试器。这意味着 Chrome 的工具可用于直接调试在 Hermes、模拟器或真实物理设备上运行的 JavaScript。

¥Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a real, physical, device.

信息

请注意，这与调试部分中记录的应用内开发菜单中已弃用的 "远程 JS 调试" 非常不同，后者实际上在开发计算机（注意本电脑或台式机）上的 Chrome V8 上运行 JS 代码，而不是连接到运行你设备上的应用。

¥Note that this is very different with the deprecated "Remote JS Debugging" from the In-App Dev Menu documented in the Debugging section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop) instead of connecting to the JS engine running the app on your device.

Chrome 通过 Metro 连接到设备上运行的 Hermes，因此你需要知道 Metro 正在监听的位置。通常这是在 localhost:8081，但这是 configurable。运行 yarn start 时，地址会在启动时写入 stdout。

¥Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on localhost:8081, but this is configurable. When running yarn start the address is written to stdout on startup.

一旦你知道 Metro 服务器正在监听的位置，你就可以使用以下步骤连接 Chrome：

¥Once you know where the Metro server is listening, you can connect with Chrome using the following steps:

在 Chrome 浏览器实例中导航到 chrome://inspect。

¥Navigate to chrome://inspect in a Chrome browser instance.
使用 Configure... 按钮添加 Metro 服务器地址（通常为如上所述的 localhost:8081）。

¥Use the Configure... button to add the Metro server address (typically localhost:8081 as described above).

Configure button in Chrome DevTools devices page

Dialog for adding Chrome DevTools network targets

你现在应该看到带有 "inspect" 链接的 "Hermes React Native" 目标，可用于启动调试器。如果你没有看到 "inspect" 链接，请确保 Metro 服务器正在运行。

¥You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running.

Target inspect link

你现在可以使用 Chrome 调试工具。例如，要在下次运行某些 JavaScript 时设置断点，请单击暂停按钮并在应用中触发一个操作，从而导致 JavaScript 执行。

¥You can now use the Chrome debug tools. For example, to breakpoint the next time some JavaScript is run, click on the pause button and trigger an action in your app which would cause JavaScript to execute.

Pause button in debug tools

在旧版本的 React Native 上启用 Hermes

¥Enabling Hermes on Older Versions of React Native

Hermes 是 React Native 0.70 的默认引擎。本节介绍如何在旧版本的 React Native 上启用 Hermes。首先，确保你使用至少 0.60.4 版本的 React Native 来在 Android 上启用 Hermes，或使用 0.64 版本的 React Native 来在 iOS 上启用 Hermes。

¥Hermes is the default engine as of React Native 0.70. This section explains how to enable Hermes on older versions of React Native. First, ensure you're using at least version 0.60.4 of React Native to enable Hermes on Android or 0.64 of React Native to enable Hermes on iOS.

如果你有基于早期版本的 React Native 的现有应用，则必须先对其进行升级。请参阅升级到新的 React Native 版本了解如何执行此操作。升级应用后，请确保一切正常，然后再尝试切换到 Hermes。

¥If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See Upgrading to new React Native Versions for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes.

React Native 兼容性注意事项

每个 Hermes 版本都针对特定的 RN 版本。经验法则是始终严格遵循 Hermes 发布。在最坏的情况下，版本不匹配可能会导致应用立即崩溃。

¥Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow Hermes releases strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.

Windows 用户注意事项

Hermes 需要 Microsoft Visual C++ 2015 可再发行组件。

¥Hermes requires Microsoft Visual C++ 2015 Redistributable.

安卓

¥Android

编辑你的 android/gradle.properties 文件并确保 hermesEnabled 为真：

¥Edit your android/gradle.properties file and make sure hermesEnabled is true:

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true

注意

该属性是在 React Native 0.71 中添加的。如果你在 gradle.properties 文件中找不到它，请参阅你正在使用的相应 React Native 版本的文档。

¥This property was added in React Native 0.71. If you can't find it in your gradle.properties file, please refer to the documentation for the corresponding React Native version you're using.

另外，如果你使用 ProGuard，则需要在 proguard-rules.pro 中添加以下规则：

¥Also, if you're using ProGuard, you will need to add these rules in proguard-rules.pro :

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

接下来，如果你已经至少构建过一次应用，请清理构建：

¥Next, if you've already built your app at least once, clean the build:

$ cd android && ./gradlew clean

就是这样！你现在应该能够像往常一样开发和部署你的应用：

¥That's it! You should now be able to develop and deploy your app as usual:

npm
Yarn

npm run android

yarn android

iOS

从 React Native 0.64 开始，Hermes 也可以在 iOS 上运行。要为 iOS 启用 Hermes，请编辑 ios/Podfile 文件并进行如下所示的更改：

¥Since React Native 0.64, Hermes also runs on iOS. To enable Hermes for iOS, edit your ios/Podfile file and make the change illustrated below:

   use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
     # By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
     # You can enable/disable it manually by replacing `flags[:hermes_enabled]` with `true` or `false`.
-    :hermes_enabled => flags[:hermes_enabled],
+    :hermes_enabled => true
   )

默认情况下，如果你使用新架构，你将使用 Hermes。通过指定 true 或 false 等值，你可以根据需要启用/禁用 Hermes。

¥By default, you will be using Hermes if you're on the New Architecture. By specifying a value such as true or false you can enable/disable Hermes as you wish.

配置完成后，你可以使用以下命令安装 Hermes pod：

¥Once you've configured it, you can install the Hermes pods with:

$ cd ios && pod install

就是这样！你现在应该能够像往常一样开发和部署你的应用：

¥That's it! You should now be able to develop and deploy your app as usual:

npm
Yarn

npm run ios

yarn ios

切换回 JavaScriptCore

¥Switching back to JavaScriptCore

React Native 还支持使用 JavaScriptCore 作为 JavaScript 引擎。请按照以下说明选择退出 Hermes。

¥React Native also supports using JavaScriptCore as the JavaScript engine. Follow these instructions to opt-out of Hermes.

安卓

¥Android

编辑 android/gradle.properties 文件并将 hermesEnabled 翻转回 false：

¥Edit your android/gradle.properties file and flip hermesEnabled back to false:

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=false

iOS

编辑 ios/Podfile 文件并进行如下所示的更改：

¥Edit your ios/Podfile file and make the change illustrated below:

   use_react_native!(
     :path => config[:reactNativePath],
+    :hermes_enabled => false,
     # Enables Flipper.
     #
     # Note that if you have use_frameworks! enabled, Flipper will not work and
     # you should disable the next line.
     :flipper_configuration => flipper_config,
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )

打包 Hermes​

确认 Hermes 正在使用​

使用 Google Chrome 的 DevTools 调试 Hermes 上的 JS​

在旧版本的 React Native 上启用 Hermes​

安卓​

iOS​

切换回 JavaScriptCore​

安卓​