React Native 0.70 版本釋出,Hermes 終於成為預設 Engine

語言: CN / TW / HK

theme: smartblue

React Native 的新版本 0.70.0 終於釋出了,本次 0.70 版本對架構進行了多項升級調整,例如:

  • 針對 Codegen 進行了新的統一配置支援
  • Hermes 成為了預設的引擎
  • Android 平臺上完整的 CMake 支援
  • 新架構文件更新

新架構的文件

自從 0.68 釋出之後,在過去的幾個月裡官方一直在努力為文件的 new-architecture 部分新增更多的內容,現在的文件包含了遷移指南、示例教程等相關內容,而新架構主要包含有:

  • JavaScript Interface(JSI)
  • Fabric
  • Turbo Modules
  • CodeGen

如果你還不知道新架構有什麼,歡迎查閱: React Native 的全新架構更新

Hermes 作為預設引擎

React Native 0.70 是第一個預設啟用 Hermes 的版本,Hermes 是 Meta 的內部 JS 引擎。

從去年 10 月開發,官方就宣佈開始準備讓 Hermes 成為所有 React Native 應用的預設引擎

Hermes 是專為資源受限的裝置而設計,並針對啟動、應用大小和記憶體消耗進行了優化,Hermes 和其他 JS 引擎之間的一個關鍵區別是:它能夠提前將 JavaScript 原始碼編譯為位元組碼

這個預編譯的位元組碼捆綁在二進位制檔案中,使直譯器不必在應用啟動期間執行這個昂貴的步驟。

而今天,Hermes 將作為預設引擎隨 React Native 0.70 一起釋出,這意味著從 v0.70 開始的所有新專案都將預設啟用 Hermes。

這裡請注意,開發者其實無需等待 React Native 0.70 才使用 Hermes ,完全可以自行啟用該能力: https://reactnative.dev/docs/hermes#enabling-hermes 。

另外,從 2020 年開始 React Native 就在硬體上針對 Android 和 iOS 運行了相關的基準測試,主要是通過 Mattermost 測量了三個不同指標:TTI、二進位制大小和記憶體消耗。

Android

| | | | ------------------------------------------------------------ | ------------------------------------------------------------ |

iOS

| | | | ----------------------------------------------------------- | ------------------------------------------------------------ |

TTI 對比

整合問題

本次釋出還解決了一個長期存在的問題,該問題主要是相容性相關,在釋出新的 React Native 版本時經常出現:React Native 通過 CocoaPods 和 npm 分發的預構建二進位制檔案依賴於 Hermes,這使得 API 或 ABI 會出現不相容

為了解決這個問題,從 React Native 0.69 開始,Hermes 會與 React Native 的每個版本一起構建,這樣做確保了 Hermes 與每個版本的 React Native 完全相容。

進行中

隨著 Hermes 不斷髮展 ,目前官方的目標是:改善開發人員體驗,並確保沒有人因為 Hermes 對 JavaScript 支援不夠完整而避免使用 Hermes,更具體地說:

  • 開發人員能夠直接從 Chrome devtools UI 執行取樣分析器。
  • 新增對 BigInt 的支援,這是來自社群的長期請求,它可能會阻止一些開發人員使用 Hermes,因為它不能被 polyfill。
  • 新增對 WeakRef 的支援。

統一的 Codegen 配置

在 0.70 中,官方引入了一種統一的方式來定義 iOS 和 Android 的 Codegen 規範,以前開發者必須將 Android 配置放在單獨的 build.gradle 檔案中,現在你可以直接在 package.json 中定義它:

json "codegenConfig": { "name": "CustomAnimationView", "type": "components", "jsSrcsDir": "./src", "android": { "javaPackageName": "com.custom.animation" } }

這一改進為庫維護者將他們的程式碼庫遷移到新架構提供了更一致的體驗

libraries 新架構

使用 0.70之後,New Architecture 上的使用者無需在其 Android.mk 或 CMake 檔案上進行任何額外配置即可自動連結庫

Autolinking 是 React Native 開發體驗的關鍵能力之一,它允許開發者使用命令包含外部庫 yarn add,而無需處理 CocoaPods 或 Gradle 設定。

新架構要求開發者調整 auto-linking 功能,以支援使用 Codegen 並將 native 庫程式碼公開給應用開發人員。

雖然 auto-linking 之前在 iOS 上的 New Architecture 庫執行良好,但對 Android 卻不是這樣,而在 0.70 中官方縮小了這一差距,開發者現在可以繼續通過 yarn add 將庫新增到專案中。

Android Full CMake

從 0.70 開始,使用者可以直接使用 CMake 來配置他們的 Native 構建,雖然我們不希望開發者直接編寫 C++ 程式碼,但仍然需要提供原生編譯的入口。

從現在開始,開發者可以使用 CMakeLists.txt 檔案而不是 Android.mk 檔案來處理專案中與 Android/Native 相關的任何內容,本次更改使得新架構上的應用和庫使用者都會變得更方便,因為:

  • 應用中建立的 CMake 檔案要小得多(只需要 3 行程式碼,而 Android.mk 檔案需要 50 多行程式碼 。
  • Codegen 現在會同時生成 Android.mkCMakeLists.txt,因此如果庫使用我們為新架構庫提供的預設設定,會自動完成適配。
  • 上面提到的自動連結將適用於 CMake 和 Android.mk 檔案。
  • 儘管現在可以自由使用 Android.mk 和 CMake 檔案,但未來推薦的解決方案還是 CMake 檔案(由於 CMake 有更好的文件、工具和生態系統)。

0.70 的亮點

如上所述,此版本中還有一些重要的改進,包括:

  • Catalyst 支援實時修復,在 Podfile 中設定 mac_catalyst_enabledtrue 可以啟用(有關詳細資訊可見 upgrade-helper )。
  • 將 Metro 升級到 0.72.0,這將啟用新的 React JSX 轉換:reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
  • reactnativeutilsjni由於它是從相同的 reactnativejni 源構建的,因此刪除它可以節省約 220 KB 左右空間。(https://github.com/facebook/react-native/pull/34339)。

breaking-changes

還有一些 breaking-changes 變化:

  • 從 react-native 包中刪除了 jest/preprocessor ( 0301cb285b by @motiz88 )
  • 刪除非標準Promise.prototype.done@motiz88018d5cf985 )

另請注意,Metro 的版本已提升至 0.72,其中包含 5 個重大更改

  • [Breaking] Enable React 17 new JSX transform (#848 by @danilobuerger)
  • ‌[Breaking] Add watcher.additionalExts option, enable inclusion of .cjs and .mjs files by default (c1c6d9c)
  • [Breaking] .json files will no longer be implicitly resolved if removed from resolver.sourceExts (a3dc30a)
  • [Breaking] With a default config, any .jsx files will now be resolved before .json, .ts, .tsx (1b47931)
  • [Breaking] Enable strict CLI validation when metro is passed an invalid subcommand or argument (19c4f7e)
  • [Feature] Add start alias for serve CLI command (19c4f7e)

升級

此本 0.70 還升級了一些依賴項:

  • 將 RN CLI 升級到 v9.0.0
  • 將 Android Gradle 外掛升級到 7.2.1
  • 將 Gradle 升級到 7.5.1
  • Bump RCT-Folly 到 2021-07-22
  • 將 Metro 提升至 0.72
  • 將 SoLoader 提升至 0.10.4

更多詳細資訊可以在 changelog 中檢視。

最後

如果你還沒升級到 Hermes 或者 0.70 版本, 可以參考 React Native 的全新架構更新 全面瞭解下有什麼特性,相信從 0.70 開始 RN 的整體穩定性和迭代會更加順暢,感覺這也是目前的主流,為了更好的體驗和維護:RN 的 JS 引擎換成自研的 Hermes ,Flutter 正從通用 Skia 切換全新自研 impeller

就是不知道 RN 什麼時候釋出 1.0 🌹🐔。

參考連結

  • https://reactnative.dev/blog/2022/09/05/version-070
  • https://reactnative.dev/blog/2022/07/08/hermes-as-the-default
  • https://github.com/facebook/metro/releases/tag/v0.72.0