6 月 21 日，React Native 0.72 正式發(fā)布！版本增加了 Metro 強(qiáng)烈要求的功能，改進(jìn)了錯(cuò)誤處理和其他開(kāi)發(fā)者體驗(yàn)方面的改進(jìn)。其中很多工作都是根據(jù) 2022 年社區(qū)調(diào)查[1]中提供的反饋進(jìn)行優(yōu)先考慮的。下面就來(lái)看看該版本都有哪些更新吧！

亮點(diǎn)

新的 Metro 功能

符號(hào)鏈接支持（beta）

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

符號(hào)鏈接支持使得 React Native 可以與多倉(cāng)庫(kù)設(shè)置和 pnpm 無(wú)縫協(xié)作，消除了臨時(shí)解決方案的需求。

包導(dǎo)出支持（beta）

包導(dǎo)出是 package.json 的現(xiàn)代替代方案，為 npm 包定義其公共 API 并針對(duì) React Native 提供新的功能。

通過(guò)在 Metro 配置中啟用包導(dǎo)出支持，應(yīng)用將與更廣泛的 JavaScript 生態(tài)系統(tǒng)兼容，包括通過(guò)新的 “react-native”社區(qū)條件[2]。

啟用 beta 版功能

要在項(xiàng)目中啟用這些功能，請(qǐng)更新應(yīng)用的 metro.config.js 文件，并設(shè)置 resolver.unstable_enableSymlinks 或 resolver.unstable_enablePackageExports 選項(xiàng)。

module.exports = {
  resolver: {
    unstable_enableSymlinks: true, // 開(kāi)啟符號(hào)鏈接功能
    // or
    unstable_enablePackageExports: true, // 開(kāi)啟包導(dǎo)功能
  },
};

新的 metro.config.js 設(shè)置

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

這個(gè)改動(dòng)將控制權(quán)移至項(xiàng)目中，使得可以擴(kuò)展基礎(chǔ)的 React Native Metro 配置，并清理了剩余的默認(rèn)設(shè)置。此外，這意味著獨(dú)立的 Metro CLI 命令（例如 metro get-dependencies）現(xiàn)在可以正常工作了。

開(kāi)發(fā)者體驗(yàn)改進(jìn)

不再出現(xiàn)由于無(wú)效的樣式屬性而導(dǎo)致的紅色提示框（redbox）

在此版本之前，在 StyleSheet 中提供一個(gè)無(wú)效的樣式屬性會(huì)導(dǎo)致出現(xiàn)紅色提示框（redbox）。這是一個(gè)高優(yōu)錯(cuò)誤，會(huì)中斷開(kāi)發(fā)者的工作流程。

在 0.72 版本中，已經(jīng)放寬了這個(gè)預(yù)期，使其能夠默認(rèn)不生效，就像在瀏覽器中提供一個(gè)無(wú)效的 CSS 屬性一樣，并且更新了類(lèi)型，以便某些錯(cuò)誤可以在構(gòu)建時(shí)而不是運(yùn)行時(shí)被捕獲。

Hermes 的錯(cuò)誤信息更易讀

Hermes 在調(diào)用未定義的可調(diào)用對(duì)象時(shí)增加了更好的錯(cuò)誤信息。

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

此外，LogBox 的堆棧跟蹤現(xiàn)在會(huì)過(guò)濾掉與應(yīng)用用戶(hù)無(wú)關(guān)的內(nèi)部 Hermes 字節(jié)碼幀。

改進(jìn)了 React Native CLI 的錯(cuò)誤輸出

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

Hermes 在大型對(duì)象字面量的編譯時(shí)間方面進(jìn)行了改進(jìn)。

例如，在一個(gè)報(bào)告的問(wèn)題 #852[3] 中，用戶(hù)將整個(gè)數(shù)據(jù)集寫(xiě)成了一個(gè)大型對(duì)象字面量。通過(guò)改進(jìn) Hermes 使用的去重算法，編譯速度提升了97%（221c[4]）。這些改進(jìn)將有助于需要打包多個(gè)對(duì)象的應(yīng)用的構(gòu)建時(shí)間。

對(duì) JSON 解析進(jìn)行了多項(xiàng)優(yōu)化，從而使使用 redux-persist 等嚴(yán)重依賴(lài) JSON 操作的庫(kù)的應(yīng)用受益。

Hermes 中更多 ECMAScript 支持

• prototype.at 支持 Array、TypedArray 和 String。
• 實(shí)現(xiàn)格式良好的 JSON.stringify 以防止格式錯(cuò)誤的 Unicode 字符串
• 實(shí)現(xiàn) AggregateError，它表示包含在單個(gè)錯(cuò)誤中的多個(gè)錯(cuò)誤。對(duì)于多個(gè)錯(cuò)誤很有用，例如當(dāng)所有傳遞給它的 promise 都拒絕時(shí)，來(lái)自 Promise.any() 的錯(cuò)誤。

對(duì)于 JSC 上的用戶(hù)，這些功能已經(jīng)可用。

移動(dòng)新架構(gòu)更新

新架構(gòu)目前處于實(shí)驗(yàn)階段。為了保持更新內(nèi)容的專(zhuān)注性，將把新架構(gòu)的更新放到專(zhuān)門(mén)的工作組中，這個(gè)變化也將允許更頻繁的更新。

重大變化

刪除已棄用的組件

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

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

包重命名

現(xiàn)在，所有從 react-native 核心存儲(chǔ)庫(kù)發(fā)布的包都在 react-native/packages 下，并且在 @react-native npm[8] 中發(fā)布，以確保明確的所有權(quán)。

react-native 包沒(méi)有任何更改。

如果對(duì)重命名的包沒(méi)有直接依賴(lài)，這個(gè)改變不會(huì)影響你。否則，在升級(jí)到 React Native 0.72 時(shí)，將任何重命名的依賴(lài)項(xiàng)更新到其 ~0.72 版本。

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

參考資料

[1]2022 年社區(qū)調(diào)查: https://github.com/react-native-community/discussions-and-proposals/discussions/528。

[2]“react-native”社區(qū)條件: 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。