跳转到主要内容

React Native 0.72 - Symlink 支持、更好的错误提示以及更多

·6 分钟阅读
Lorenzo Sciandra
Lorenzo Sciandra
微软高级软件工程师
Marek Fořt
Marek Fořt
Shopify 软件工程师
Riccardo Cipolleschi
Riccardo Cipolleschi
Meta 软件工程师
Luna Wei
Luna Wei
Meta 软件工程师

今天我们发布 0.72!

此版本为 Metro 增加了备受期待的功能、更好的错误处理以及其他开发者体验改进。这项工作的很大一部分优先考虑了您在 2022 年社区调查 中的反馈 -- 感谢所有参与者!

亮点

重大变更

亮点

新的 Metro 功能

Symlink 支持一直是 Metro 中最受用户请求的功能之一,在 React Native 0.72 中,我们很高兴地宣布对其进行 Beta 版支持。

Symlink 支持使 React Native 能够透明地与 monorepo 设置和 pnpm 一起工作,从而无需使用变通方法。请参阅启用 Beta 功能,以便在您的应用中使用。

目前它处于 Beta 版阶段,旨在收集关于不同工作流程的开发者体验反馈,请在此处查看更多详细信息 here。我们计划在 0.73 中默认启用 symlink。

Package Exports 支持(Beta 版)

Package Exports 是 package.json "main" 字段的现代替代方案,并为 npm 包提供了定义其公共 API 和针对 React Native 的新功能。

通过在您的 Metro 配置中启用 Package Exports 支持,您的应用将与更广泛的 JavaScript 生态系统兼容,包括通过新的 "react-native" 社区条件。请参阅启用 Beta 功能,以便在您的应用中使用。

提示

请参阅 React Native 中的 Package Exports 支持,以了解有关此功能以及我们稳定推广计划的更多信息。

启用 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 在调用未定义的 callable 时添加了更好的错误消息。

    var x = undefined; x();
// Before: undefined is not a function
// After: 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) 也已落地,这将使使用像 redux-persist 这样严重依赖 JSON 操作的库的应用受益。

Hermes 中更多的 ECMAScript 支持

React Native 0.72 中 Hermes 已支持以下规范

对于 JSC 用户,这些功能已可用。

新架构更新进展

新架构目前处于实验阶段。为了使更新专注于其目标受众,我们将 0.72 和未来版本中的新架构更新移至专门的 工作组。此更改还将允许更频繁的更新,例如在我们的 nightly 版本中发布的工作。

您可以在此处阅读有关新架构的 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 中阅读导致这些更改的动机。

鸣谢

此版本的很多内容都来自社区的直接反馈。从关于 嘈杂的红框Package Exports 的错误新架构的基准测试 的报告 -- 所有这些都很有价值,我们感谢您花费时间分享反馈。

0.72 版本包含来自 66 位贡献者的超过 1100 次提交。感谢您的辛勤工作!

升级到 0.72

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

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

信息

0.72 现在是 React Native 的最新稳定版本,0.69.x 版本现在变为不受支持。有关更多信息,请参阅 React Native 的支持策略