React Native 0.79 —— 更快的開發(fā)工具,功能更強大

概述

本次版本帶來了多個方面的性能優(yōu)化及若干 Bug 修復(fù)。
首先,Metro 通過引入延遲哈希技術(shù)大幅加快了啟動速度,并穩(wěn)定支持 package exports。Android 端也通過 JS Bundle 壓縮方式優(yōu)化,提升了應(yīng)用啟動速度。

更新亮點

  • Metro 工具新特性
  • JSC 移至社區(qū)維護包
  • iOS 支持 Swift 原生模塊注冊
  • Android 應(yīng)用啟動更快
  • 移除遠程 JS 調(diào)試功能

Metro:更快的啟動速度 & 包導(dǎo)出支持


本版本內(nèi)置 Metro 0.82。該版本通過延遲哈希,提升了首次運行 yarn start 的速度,通常超過 3 倍提升,尤其是在大型項目和 monorepo 中效果更顯著。

此外,package.json 中的 exportsimports 字段支持現(xiàn)已變?yōu)榉€(wěn)定,默認啟用。
這些特性最早在 0.72 引入,由社區(qū)貢獻完善,現(xiàn)在在 0.79 全面啟用。

這提高了對現(xiàn)代 npm 依賴的兼容性,并提供了更標(biāo)準(zhǔn)的項目結(jié)構(gòu)組織方式。

JSC 遷移至社區(qū)包

為縮減 React Native 的核心 API 表面,我們將 JavaScriptCore (JSC) 引擎遷移至社區(qū)維護的包:
@react-native-community/javascriptcore

此更改不會影響使用 Hermes 的用戶。

從 0.79 起,用戶可根據(jù) README 使用該社區(qū)版本。核心內(nèi)置的 JSC 在 0.79 仍可使用,但未來版本將被移除。

遷移至社區(qū)包后,JSC 將擁有獨立的更新節(jié)奏,更快速提供新功能。

iOS:支持 Swift 的原生模塊注冊方式

本版本重新設(shè)計了原生模塊注冊流程,遵循與組件注冊一致的模式(詳見官方文檔)。

你可以在 package.json 中通過 modulesProvider 字段注冊模塊:

"codegenConfig": {
  "ios": {
    "modulesProvider": {
      "模塊 JS 名稱": "ObjC/C++ 模塊提供者或符合 RCTTurboModule 的類"
    }
  }
}

Codegen 將自動從 package.json 生成所需代碼。

特別地,該機制支持 純 C++ 模塊 + Swift AppDelegate 的組合,解決了 0.77 引入的限制,適用于 Swift 和 Objective-C 兩種實現(xiàn)。

Android:應(yīng)用啟動速度優(yōu)化

我們對 Android 的啟動流程進行了優(yōu)化。

以往 JS Bundle 會壓縮打入 APK,系統(tǒng)需先解壓才能啟動,導(dǎo)致性能瓶頸。

從 0.79 起,JS Bundle 將默認不壓縮,大幅提升啟動速度。

實測效果:Margelo 團隊在 Discord 應(yīng)用上測試后,交互準(zhǔn)備時間(TTI)減少了 400ms(約 12% 提升),僅需一行配置。

若你希望節(jié)省磁盤空間,可在 app/build.gradle 中使用以下配置:

react {
  enableBundleCompression = true // 壓縮(空間小,啟動慢)
  enableBundleCompression = false // 默認值(空間大,啟動快)
}

注意:APK 文件體積會增加,但下載時仍會壓縮,因此不會影響網(wǎng)絡(luò)下載體積。

不兼容更新(Breaking Changes)

移除遠程 JS 調(diào)試功能

為改善調(diào)試體驗,我們徹底移除了使用 Chrome 進行的“遠程 JS 調(diào)試”功能。

該功能自 0.73 起即標(biāo)記為棄用,并需手動啟用。
請改用 React Native DevTools 進行現(xiàn)代可靠的調(diào)試。

同時,這意味著 react-native-debugger 項目將不再兼容。若你使用 Redux DevTools 等第三方插件,建議遷移至:

  • Expo DevTools 插件,或
  • 獨立集成版本的工具

更多信息詳見專門文章

內(nèi)部模塊導(dǎo)出方式變更

為現(xiàn)代化 JavaScript 代碼風(fēng)格,我們統(tǒng)一將 React Native 內(nèi)部實現(xiàn)模塊改為使用 export 語法,而非 module.exports。

本次共更新約 46 個 API,詳情可查看 changelog

變更影響如下:

  • 默認導(dǎo)出不變
  • 次級導(dǎo)出需稍作調(diào)整

預(yù)計該更改對使用 TypeScript 和 import 的項目影響非常小。建議檢查類型錯誤并相應(yīng)調(diào)整代碼。

TIP:建議統(tǒng)一從 'react-native' 根路徑導(dǎo)入,避免未來深層路徑導(dǎo)入被移除時造成破壞。

其他 Breaking Changes

以下變更可能對你的項目產(chǎn)生輕微影響,建議關(guān)注:

box-shadow 和 filter 中不再支持無單位長度

為遵循 CSS/Web 標(biāo)準(zhǔn),React Native 不再支持無單位的 box-shadowfilter 值。

錯誤寫法(不再支持):

box-shadow: 1 1 black;

應(yīng)改為:

box-shadow: 1px 1px black;

移除 hwb() 非標(biāo)準(zhǔn)語法支持

React Native 不再支持 hwb() 中的逗號分隔值:

錯誤寫法:

hwb(0, 0%, 100%)

正確寫法:

hwb(0 0% 100%)

ExceptionsManager 導(dǎo)出方式調(diào)整

我們將 Libraries/Core/ExceptionsManager 模塊調(diào)整為:

  • 默認導(dǎo)出:ExceptionsManager
  • 次級導(dǎo)出:SyntheticError
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容