Windows + macOS 上的 Hermes
Hermes
Hermes 引擎是一个由 Facebook 创建的开源 JavaScript 引擎,用于优化 React Native 应用程序的构建和运行。
要了解有关其功能和使用方法的更多信息,请查阅 React Native 相关文档。
Windows 上的 Hermes
Windows 支持 Hermes,通常提供比默认 Chakra 引擎更好的性能特性。
为新项目启用 Hermes
React Native Windows 项目默认启用 Hermes。
在现有项目中启用 Hermes
在项目 windows 目录下的 ExperimentalFeatures.props 文件中,将 UseHermes 属性设置为 true。
<PropertyGroup Label="Microsoft.ReactNative Experimental Features">
...
<UseHermes>true</UseHermes>
</PropertyGroup>
禁用 Hermes
要恢复使用 Chakra,请在项目 windows 目录下的 ExperimentalFeatures.props 文件中,将 UseHermes 属性设置为 false。
<PropertyGroup Label="Microsoft.ReactNative Experimental Features">
...
<UseHermes>false</UseHermes>
</PropertyGroup>
已知限制
- Hermes dll 未经 Microsoft 签名。
macOS 上的 Hermes
只要您使用的版本是 0.62 或更高,React Native for macOS 上就可以使用 Hermes。要了解如何升级到最新版本,请查阅 macOS 入门指南的“升级”部分。
升级到最新版本的 React Native for macOS 后,安装并添加以下内容
- 安装 npm 包
yarn add 'hermes-engine-darwin@^0.4.3' - 在您的
Podfile中,为您的 macOS 目标添加(或取消注释)以下 pod 依赖项
pod 'React-Core/Hermes', :path => '../node_modules/react-native-macos/'
pod 'hermes', :path => '../node_modules/hermes-engine-darwin'
pod 'libevent', :podspec => '../node_modules/react-native-macos/third-party-podspecs/libevent.podspec'
- 运行
pod install
在运行
pod install之前,请务必将您的目标的部署目标设置为至少 10.14
Hermes 检查器
React Native for Windows 与 Hermes 引擎支持使用 Chrome 或 Edge devtools、VSCode 调试器、Flipper 等工具通过实现进程内 Chrome 调试协议服务器进行直接 JavaScript 运行时检查。请注意,这与“远程 JS 调试”有本质区别,后者将 JavaScript 捆绑包加载到远程 Chrome 浏览器会话中,并通过 IPC 通道进行双工通信。
我们尽可能与其他平台共享实现(代码和设计)。所有外部端点、API 和协议应与其他平台上的 React Native 环境相同。因此,我们期望大多数在其他平台上可用的工具也能在 Windows 上运行。但截至目前,我们仅测试了 Chrome 和 Edge devtools。
启用直接调试的步骤
- 初始化 React Native Host,
- 开启
DeveloperSupport - 开启
FastRefresh - 关闭
WebDebugger - 开启
Direct Debugging
- 开启
- 确保开发服务器正在运行
- 启动应用程序
应用程序启动后,
- 在 Edge 浏览器中导航到
edge://inspect或在 Chrome 浏览器中导航到chrome://inspect - 启用发现网络目标并配置目标发现设置以包含
localhost:8081(或 Metro 服务器运行的任何位置) - 几秒钟内,“Hermes React Native”应作为远程目标出现在页面上
- 点击检查链接启动
devtools页面 - 点击
Ctrl+P打开源文件并设置断点 - 或者,您可以在源代码中插入
debugger语句以在特定位置中断
要在启动期间在特定位置中断,您可以选择
- 在启动序列中添加语句以暂停运行时,等待调试器连接。
debugger;
- 设置一个断点并通过开发服务器刷新捆绑包。运行时将等待调试器附加。
启用堆分析的步骤
按照上述步骤 1-7 操作,然后
- 点击检查器中的“内存”选项卡
- 堆快照和仪器分配应该正常工作。
在发布版本上启用调试/分析
我们默认在发布版本中关闭检查器。如果您想调试或分析发布版本,请在使用 run-windows 命令构建平台时,将 MSBuild 属性 EnableHermesInspectorInReleaseFlavor 设置为 'true',即
npx react-native run-windows --msbuildprops EnableHermesInspectorInReleaseFlavor=true
已知问题
- CPU 采样分析器目前无法工作。