6 月 21 日，React Native 0.72 正式發布！版本增加了 Metro 強烈要求的功能，改進了錯誤處理和其他開發者體驗方面的改進。其中很多工作都是根據 2022 年社區調查[1]中提供的反饋進行優先考慮的。下面就來看看該版本都有哪些更新吧！

亮點

新的 Metro 功能

符號鏈接支持（beta）

符號鏈接支持仍然是 Metro 中最受歡迎的功能之一，在 React Native 0.72 中提供了 beta 版支持。

符號鏈接支持使得 React Native 可以與多倉庫設置和 pnpm 無縫協作，消除了臨時解決方案的需求。

包導出支持（beta）

包導出是 package.json 的現代替代方案，為 npm 包定義其公共 API 并針對 React Native 提供新的功能。

通過在 Metro 配置中啟用包導出支持，應用將與更廣泛的 JavaScript 生態系統兼容，包括通過新的 “react-native”社區條件[2]。

啟用 beta 版功能

要在項目中啟用這些功能，請更新應用的 metro.config.js 文件，并設置 resolver.unstable_enableSymlinks 或 resolver.unstable_enablePackageExports 選項。

module.exports = {
  resolver: {
    unstable_enableSymlinks: true, // 開啟符號鏈接功能
    // or
    unstable_enablePackageExports: true, // 開啟包導功能
  },
};

新的 metro.config.js 設置

在 React Native 0.72 中，改變了 React Native CLI 中 Metro 的配置加載設置。需要更新項目中的 metro.config.js 文件，保持與模板版本一致。

這個改動將控制權移至項目中，使得可以擴展基礎的 React Native Metro 配置，并清理了剩余的默認設置。此外，這意味著獨立的 Metro CLI 命令（例如 metro get-dependencies）現在可以正常工作了。

開發者體驗改進

不再出現由于無效的樣式屬性而導致的紅色提示框（redbox）

在此版本之前，在 StyleSheet 中提供一個無效的樣式屬性會導致出現紅色提示框（redbox）。這是一個高優錯誤，會中斷開發者的工作流程。

在 0.72 版本中，已經放寬了這個預期，使其能夠默認不生效，就像在瀏覽器中提供一個無效的 CSS 屬性一樣，并且更新了類型，以便某些錯誤可以在構建時而不是運行時被捕獲。

Hermes 的錯誤信息更易讀

Hermes 在調用未定義的可調用對象時增加了更好的錯誤信息。

var x = undefined; x();
// 以前: undefined is not a function
// 現在: x is not a function (it is undefined)

此外，LogBox 的堆棧跟蹤現在會過濾掉與應用用戶無關的內部 Hermes 字節碼幀。

改進了 React Native CLI 的錯誤輸出

0.72 版本搭載了 React Native CLI v11，其中包括改進的功能，以減少重復、減少冗長的堆棧跟蹤，并在以下命令 init、run-android 和 run-ios 中添加了相關文檔的鏈接。

Hermes 在大型對象字面量的編譯時間方面進行了改進。

例如，在一個報告的問題 #852[3] 中，用戶將整個數據集寫成了一個大型對象字面量。通過改進 Hermes 使用的去重算法，編譯速度提升了97%（221c[4]）。這些改進將有助于需要打包多個對象的應用的構建時間。

對 JSON 解析進行了多項優化，從而使使用 redux-persist 等嚴重依賴 JSON 操作的庫的應用受益。

Hermes 中更多 ECMAScript 支持

• prototype.at 支持 Array、TypedArray 和 String。
• 實現格式良好的 JSON.stringify 以防止格式錯誤的 Unicode 字符串
• 實現 AggregateError，它表示包含在單個錯誤中的多個錯誤。對于多個錯誤很有用，例如當所有傳遞給它的 promise 都拒絕時，來自 Promise.any() 的錯誤。

對于 JSC 上的用戶，這些功能已經可用。

移動新架構更新

新架構目前處于實驗階段。為了保持更新內容的專注性，將把新架構的更新放到專門的工作組中，這個變化也將允許更頻繁的更新。

重大變化

刪除已棄用的組件

以下軟件包已從 React Native 0.72 中刪除。請遷移到推薦的社區包：

• Slider 被 @react-native-community/slider^[5] 取代。
• DatePickerIOS 被 @react-native-community/datetimepicker^[6] 取代。
• ProgressViewIOS 被 @react-native-community/progress-view^[7] 取代。

包重命名

現在，所有從 react-native 核心存儲庫發布的包都在 react-native/packages 下，并且在 @react-native npm[8] 中發布，以確保明確的所有權。

react-native 包沒有任何更改。

如果對重命名的包沒有直接依賴，這個改變不會影響你。否則，在升級到 React Native 0.72 時，將任何重命名的依賴項更新到其 ~0.72 版本。

官方更新文檔： https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks。

參考資料

[1]2022 年社區調查: https://github.com/react-native-community/discussions-and-proposals/discussions/528。

[2]“react-native”社區條件: https://nodejs.org/docs/latest-v19.x/api/packages.html#community-conditions-definitions。

[3]#852: https://github.com/facebook/hermes/issues/852。

[4]221c: https://github.com/facebook/hermes/commit/221ce21a209e2e32a3eaaa2d9e28ca81842fad20。

[5]@react-native-community/slider: @react-native-community/slider。

[6]@react-native-community/datetimepicker: https://github.com/react-native-datetimepicker/datetimepicker。

[7]@react-native-community/progress-view: https://github.com/react-native-progress-view/progress-view。

[8]@react-native npm scope: https://www.npmjs.com/search?q=%40react-native。