React Native 0.76 - 默认启用新架构、React Native DevTools 等
今天，我们很高兴发布 React Native 0.76！
这是 React Native 的一个重要里程碑，因为我们默认启用了新架构，并且推出了 React Native DevTools。这是我们团队 6 年辛勤工作的结晶，也离不开我们出色的开发者社区的支持。
亮点
重大变更
亮点
React Native 默认启用新架构
从 React Native 0.76 开始，新架构默认在您的项目中启用。新架构是对 React Native 内部的重写，旨在使应用开发者能够使用 React 开发高质量的原生应用。
今天，我们很高兴地宣布新架构已可用于生产环境。
这项改变是 React Native 发展中的一个里程碑，我们邀请您阅读专门的博客文章，了解新架构中包含的内容以及它将如何塑造 React Native 的未来：新架构来了。
React Native DevTools
我们正在发布 React Native DevTools 的第一个稳定版本，这是我们新的默认调试体验。
我们希望您用于调试 React 跨所有平台的工具是可靠、熟悉、简单且一致的。React Native DevTools 秉持这些原则——与 React Native 深度集成的浏览器对齐的开发者工具。主要功能包括：
- 熟悉且与 Web 对齐的工具 — 一个基于 Chrome DevTools 的全功能调试器，具有可靠的断点、监视值、单步调试、堆栈检查和功能丰富的 JavaScript 控制台。这些核心功能现在在重新加载时也能可靠工作。
- 改进且集成的 React DevTools — 内置的 React 组件检查器和性能分析器无缝工作，组件高亮显示更快、更可靠。
- 改进的用户体验 — 查看新的调试器暂停叠加层，清楚地显示您的应用何时在断点处暂停。LogBox 中的警告现在以摘要形式显示，并在 DevTools 连接时隐藏。
- 修复了重新连接行为 — JavaScript 断点现在在重新加载时以及 DevTools 断开连接和重新连接时都能可靠工作。DevTools 甚至可以在原生重新构建后重新连接到相同的应用。
- 即时启动 — React Native DevTools 默认即开即用，零配置。您可以从应用内开发者菜单或通过 j 键在 CLI 服务器中打开它进行调试，现在它支持多个模拟器和设备。
React Native DevTools 与我们之前的调试选项有着根本不同，包括与 0.73 中首次发布的实验性调试器体验不同。它切换到了我们在过去一年中重建的新后端调试堆栈。这意味着与以前工具的兼容性已发生变化，您也应该期待更可靠的端到端体验。我们打算在此新堆栈的基础上构建，以便将来能够可靠地实现更多功能，例如性能和网络面板。
Metro 中日志逐步淘汰
在我们的下一个版本中，我们将移除 Metro 中转发的日志，以与现代浏览器工具对齐，并移除旧的调试集成。取而代之的是，使用 React Native DevTools 功能齐全的控制台面板进行日志记录。更多信息请参阅我们的常见问题解答。
链接
更快的 Metro 解析
我们对 Metro 的解析器进行了多项性能改进，该组件负责根据导入路径查找模块，使其速度提升了约15 倍。这提高了 Metro 的整体性能，特别是对于热构建，我们看到其速度提升了约 4 倍。
Box Shadow 和 Filter 样式属性
在 0.76 版本中，我们新增了两个仅限新架构的样式属性：boxShadow 和 filter。这两个属性在 Web 上都存在，团队在可能的情况下遵循规范，使这些属性可预测、熟悉并最终更易于采用（例外情况请参阅限制和规范偏差部分）。因此，您可以查阅 Web 文档以充分了解它们的工作原理，但下面注明了一些重要的差异。
boxShadow
boxShadow 为元素添加阴影，并能够控制阴影的位置、颜色、大小和模糊度。请查看MDN 文档，了解每个参数的完整概述，以及一个供您亲自尝试的示例。下面是一些您可以制作的阴影示例。
boxShadow 可以接受字符串（模仿 CSS 语法）或可嵌入变量的 JS 对象。例如，字符串 ‘5 5 5 0 rgba(255, 0, 0, 0.5)’ 和对象 {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: ‘rgba(255, 0, 0, 0.5)’} 将产生相同的盒阴影。
以前的阴影功能存在一些缺陷，现在通过 boxShadow 得到解决：
限制与规范偏差
- 默认阴影颜色为黑色，而非父元素的颜色
- Android 普通阴影支持 Android 9+
- Android 内嵌阴影支持 Android 10+
filter
filter 为元素添加特定的图形滤镜。它包含一系列颜色滤镜（可让您修改亮度、饱和度和色调等）以及非颜色滤镜（可让您添加模糊和阴影）。请查看MDN 文档，了解每个单独滤镜功能的完整概述，以及一个供您亲自尝试的示例。下面是一张应用了各种滤镜的热狗图片。
saturate 滤镜、blur 滤镜、invert 滤镜与 boxShadow 类似，filter 可以接受字符串（模仿 CSS 语法）或可嵌入变量的 JS 对象数组。例如，字符串 ‘saturate(0.5) grayscale(0.25)’ 和数组 [{saturate: 0.5}, {grayscale: 0.25}] 将产生相同的滤镜效果。filter 有一个 dropShadow 值，它与 boxShadow 略有不同。最大的区别在于 dropShadow 是一个 alpha 遮罩——因此阴影只有在像素具有非零 alpha 分量时才会被投射。另一方面，boxShadow 将围绕元素的边框盒投射，即使其中没有任何内容。此外，dropShadow 没有扩散距离参数，并且不能内嵌（在元素内部投射阴影）。
限制和规范偏差
- iOS 的
filter只支持亮度和不透明度 - iOS 的
filter不会应用于阴影、轮廓或元素边界之外的任何其他图形元素 - Android 的
blur和drop-shadow仅在 Android 12+ 上受支持 filter意味着overflow: hidden，因此带有filter的元素的子元素如果定位在父元素边界之外，将被裁剪。
重大变更
移除了对 @react-native-community/cli 的依赖
正如之前在 0.75 中分享的，我们的愿景是让 React Native 与框架无关。因此，我们完成了移除 @react-native-community/cli 作为 React Native 直接依赖项的工作。
将 React Native 与 CLI 解耦使我们能够通过独立发布这些项目来更快地前进，并更好地分离两个项目的职责。
如果您在日常工作流程中依赖 CLI，请务必在您的 package.json 中显式添加 CLI 依赖。
//…
“devDependencies”: {
// …
+ “@react-native-community/cli”: “15.0.0”,
+ "@react-native-community/cli-platform-android": “15.0.0”,
+ "@react-native-community/cli-platform-ios": “15.0.0”,
},
得益于原生库合并，Android 应用体积减小约 3.8MB
React Native 0.76 将减少原生库的数量，因为我们已将大部分原生代码合并到一个名为 libreactnative.so 的库中。
这一改变将减小应用体积，并改善 Android 上的应用启动性能。根据我们的基准测试，我们发现应用体积将减少约 3.8MB（总量的 20%），中位数应用启动时间将减少约 15ms（约 8%）(来源)。
另一方面，这对于应用和库开发者来说都是一个重大变更。
应用开发者需要如下更新其 Application 的 onCreate 方法
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
+ SoLoader.init(this, OpenSourceMergedSoMapping)
- SoLoader.init(this, false)
}
}
此更改对于正确加载 libreactnative.so 是必需的，并已包含在升级助手中。
库作者不会受到此更改的影响，除非您有自定义 C++ 代码。
要深入了解此更改以及为库作者提供的建议，您可以阅读专门的帖子。
iOS 和 Android SDK 最低要求更新
我们已更新了最低平台和 SDK 版本：
此更改已于今年早些时候在 0.75 发布时宣布。有关更多背景信息，请参阅针对 Android 和 iOS 的专门帖子。
其他重大变更
- 动画
- 停止在循环动画中向 React 发送状态更新。这曾导致循环动画不必要的重新渲染。
- 开发者工具
- 在新架构下移除检查器面板的性能和网络选项卡。(RFC)
- 文本引擎
- 在 TextLayoutManager 中始终使用 AttributedStringBox 而非 AttributedString
Android
- 渲染
- View 背景不再直接是
ReactViewBackgroundDrawable或CSSBackgroundDrawable
- View 背景不再直接是
iOS
- TurboModule
- 移除了用于自动链接纯 Cxx 模块的
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL宏。
- 移除了用于自动链接纯 Cxx 模块的
致谢
React Native 0.76 包含了 156 位贡献者提交的超过 1070 个提交。感谢大家的辛勤工作！
感谢所有参与撰写此发布帖子中功能文档的额外作者：
- Joe Vilches 和 Nick Gerleman 负责 box-shadow 和 filter 样式属性。
- Alex Hunt 负责 React Native DevTools。
- Nicola Corti 负责 Android 以单个库形式发布。
升级到 0.76
请使用 React Native 升级助手 来查看现有项目在不同 React Native 版本之间的代码变更，以及升级文档。
如果您使用 Expo，React Native 0.76 将在 Expo SDK 52 中得到支持。
如果您需要使用 CLI 创建一个新项目，您可以运行此命令：
npx @react-native-community/cli@latest init MyProject --version latest
0.76 现在是 React Native 的最新稳定版本，0.73.x 已不再受支持。更多信息请参阅 React Native 的支持政策。我们计划在不久的将来发布 0.73 的最终生命周期结束更新。