跳到主要内容

React Native 0.72 - 符号链接支持、更好的错误提示等

· 阅读需 8 分钟
Lorenzo Sciandra
Lorenzo Sciandra
Senior Software Engineer @ Microsoft
Marek Fořt
Marek Fořt
Software Engineer @ Shopify
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer @ Meta
Luna Wei
Luna Wei
Software Engineer @ Meta

今天我们发布了 0.72!

本次发布为 Metro 增加了备受期待的功能,更好的错误处理,以及其他开发者体验的改进。许多工作都是基于你们在2022 年社区调查中的反馈优先排序的——感谢所有参与的朋友们!

亮点

重大变更

亮点

Metro 新特性

符号链接支持(Beta)

符号链接支持一直是 Metro 中最受欢迎的功能之一,在 React Native 0.72 中,我们高兴地宣布其进入 Beta 版本支持。

符号链接支持使 React Native 能够透明地支持 monorepo 结构和 pnpm,消除了使用变通方案的需求。请参阅启用 Beta 功能,在你的应用中使用该功能。

该功能目前处于 Beta 阶段,旨在收集针对不同工作流程的开发者体验反馈,详情见这里。我们计划在 0.73 版本默认启用符号链接。

包导出支持(Beta)

包导出是 package.json 中 "main" 字段的现代替代方案,为 npm 包定义其公共 API 和针对 React Native 的目标提供了新能力。

通过在 Metro 配置中启用包导出支持,你的应用将兼容更广泛的 JavaScript 生态系统,包括新的 "react-native" 社区条件。参见启用 Beta 功能来使用此功能。

提示

详见 React Native 中的包导出支持,了解此功能和我们稳定发布的规划。

启用 Beta 功能

要在项目中启用这些功能,请更新应用的 metro.config.js 文件,设置 resolver.unstable_enableSymlinksresolver.unstable_enablePackageExports 选项。

const config = {
// ...
resolver: {
unstable_enableSymlinks: true,
unstable_enablePackageExports: true,
},
};

新的 metro.config.js 设置

在 React Native 0.72 中,我们更改了 React Native CLI 中 Metro 的配置加载方式。请将你的项目中的 metro.config.js 文件更新为模板版本

信息

请将配置文件更新为以下格式。你也可以参考升级助手

这些对 metro.config.js 格式的更改将在 0.73 版本成为必需。0.72 版本如果未更新,将会有警告提示。

这使得扩展基础 React Native Metro 配置的控制权转移到你的项目中,并清理了残留的默认设置。此外,这意味着独立的 Metro CLI 命令(如 metro get-dependencies)现在可以正常工作。

开发者体验改进

无效样式属性不再导致红屏

在此之前,在 StyleSheet 中提供无效的样式属性会导致红屏错误。这个错误信号等级较高,打断开发者的工作流程,但错误的风险相对较低。

在 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,改进内容包括减少重复、用词更清晰、减少冗长的堆栈追踪,并为 initrun-androidrun-ios 命令添加到相关文档的深度链接。

你可以在 React Native CLI 更新日志 中看到更多改进。

Hermes 中更快的编译和 JSON 解析

Hermes 提升了大型对象字面量的编译速度。例如,在一个报告的问题#852中,用户将整个数据集写成了一个大型对象字面量。通过改进 Hermes 的会去重算法,编译速度提升了 97%(221c)。这些改进将有利于打包许多对象的应用构建时间。

另外对 JSON 解析的多项优化(de9c, 6e2d)也已合入,特别对依赖大量 JSON 操作的库(如 redux-persist)带来性能提升。

Hermes 支持更多 ECMAScript 特性

React Native 0.72 中 Hermes 新支持以下规范:

JSC 用户已经可以使用这些功能。

新架构更新迁移

新架构目前仍处于实验阶段。为了将更新集中于目标受众,我们将在 0.72 及未来版本中,将新架构的更新迁移到专门的工作组。此举也方便更频繁地推送更新,如我们夜间版本中发布的内容。

你可以在这里阅读 0.72 新架构更新。订阅该工作组的 GitHub 通知,随时了解我们新架构的进展。

重大变更

已废弃组件移除

下列包在 React Native 0.72 中已被移除。请迁移到对应的社区推荐包:

包重命名

所有从 react-native 核心仓库发布的包,现在都位于 react-native/packages 下,并且以 @react-native npm 作用域发布,以确保清晰的归属。

react-native 主包没有变更。

旧包名新包名
@react-native-community/eslint-config@react-native/eslint-config
@react-native-community/eslint-plugin@react-native/eslint-plugin
@react-native/polyfills@react-native/js-polyfills
@react-native/normalize-color@react-native/normalize-colors
@react-native/assets@react-native/assets-registry
react-native-codegen@react-native/codegen
react-native-gradle-plugin@react-native/gradle-plugin

如果你没有直接依赖这些已重命名的包,这一变更不会影响你。否则,在升级到 React Native 0.72 时,请将重命名的依赖升级到 ~0.72 版本。

你可以在专门的 RFC中阅读导致这些变更的原因。

致谢

本次发布的许多内容源自社区的直接反馈。从嘈杂的红屏报告包导出相关的 Bug新架构的基准测试 —— 这些反馈都非常宝贵,我们感谢花时间提供反馈的你们。

0.72 版本包含了 66 位贡献者提交的超过 1100 个提交。感谢大家的辛勤工作!

升级至 0.72

查看 升级助手 中所需的变更列表,或阅读升级文档了解如何更新现有项目,或使用 npx react-native@latest init MyProject 创建新项目。

如果你使用 Expo,React Native 0.72 版本将在 Expo SDK 49 中支持。

信息

0.72 现已成为 React Native 的最新稳定版本,0.69.x 版本转为不再支持。更多信息请查看 React Native 的支持政策