跳到主要内容

React Native 0.83 - React 19.2，新的 DevTools 功能，无破坏性更改

·12 分钟阅读
Alex Hunt
Alex Hunt
Meta 软件工程师
Riccardo Cipolleschi
Riccardo Cipolleschi
Meta 软件工程师
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Expo 软件工程师
Alan Hughes
Alan Hughes
Expo 软件工程师

今天，我们很高兴发布 React Native 0.83！

此次发布包括 React 19.2，React Native DevTools 的重要新功能，以及对 Web Performance 和 Intersection Observer API（Canary）的支持。这也是第一个没有面向用户破坏性更改的 React Native 版本。

亮点​

React 19.2​

本次发布包含了 React 19.2，为 React Native 带来了新的 <Activity> 和 useEffectEvent API。

重要：CVE-2025-55182

发布时，react-native@0.83.0 依赖于 react@19.2.0，您可能还看到了最近发布的 React Server Components 中的严重安全漏洞。

我们想强调的是，React Native 不受此漏洞的直接影响，因为它不依赖受影响的软件包

  • react-server-dom-webpack
  • react-server-dom-parcel
  • react-server-dom-turbopack

但是，如果您将 React Native 用作 monorepo 的一部分，而这些软件包可能存在于其中，请立即检查并升级它们。

我们将在下一个补丁版本中将所有 React 依赖项更新到 19.2.1。

<Activity>​

<Activity> 允许您将应用程序分解为可以控制和优先级的“活动”。您可以使用 Activity 来替代条件渲染应用程序的某些部分，目前它支持 2 种模式：'visible' 和 'hidden'。

  • hidden：隐藏子组件，卸载 effect，并推迟所有更新，直到 React 没有其他工作要做。
  • visible：显示子组件，挂载 effect，并允许正常处理更新。

使用 <Activity mode='hidden'> 隐藏的树的一个有趣特性是它们会保留其状态。因此，当它们再次可见时，它们会保留例如用户上次交互时的搜索状态和选择。

React 19.1.1React 19.2.1

您可以在 React 文档中阅读有关 <Activity> 的更多信息。

useEffectEvent​

useEffect 的一个常见模式是通知应用程序代码有关外部系统的某种“事件”。这种方法的问题在于，使用该事件中的任何值都会导致周围的 Effect 重新运行。

为了解决这个问题，大多数用户会禁用 lint 规则并排除依赖项。但这可能导致错误，因为如果您以后需要更新 Effect，linter 将无法再帮助您保持依赖项的最新。

使用 useEffectEvent，您可以将此逻辑的“事件”部分与发出它的 Effect 分开。

您可以在 React 文档中阅读有关 useEffectEvent 的更多信息。

新的 DevTools 功能​

在 0.83 版本中，我们很高兴为 React Native DevTools 带来了期待已久的功能和生活质量的改进。

网络和性能面板​

网络检查和性能跟踪是 React Native DevTools 中两个强大的新功能，现已推出。

Network panel list in React Native DevTools

网络检查现已适用于所有 React Native 应用，允许您查看和理解应用程序发出的网络请求。记录的请求提供详细的元数据，如发送/接收的计时和标头，以及响应预览。而且 — — 首次 — — 您可以使用 Initiator 选项卡查看代码中发起网络请求的位置。

💡 网络事件覆盖，Expo 支持

捕获哪些网络事件？

今天，我们通过 fetch()、XMLHttpRequest 和 <Image> 记录所有网络调用 — — 未来还将支持自定义网络库，例如 Expo Fetch。

Expo 网络差异

因此，使用 Expo 的应用程序将继续看到“Expo Network”面板 — — 这是 Expo 框架提供的独立实现，它将记录其他请求源，但功能略有减少。

  • Expo 特定网络事件的覆盖。
  • 无请求发起者支持。
  • 无性能面板集成。

我们正在与 Expo 合作，在未来的版本中将 Expo Fetch 和第三方网络库集成到我们新的网络检查管道中。

A performance trace in React Native DevTools

性能跟踪允许您在应用程序内记录性能会话，以了解 JavaScript 代码的运行方式以及哪些操作花费的时间最多。在 React Native 中，我们显示 JavaScript 执行、React 性能跟踪、网络事件和自定义 用户计时，这些都呈现在一个统一的性能时间线上。

结合 0.83 版本中对 Web 性能 API 的支持，这套强大的功能集提供了对可能导致 React Native 应用变慢的原因的细粒度可见性。我们鼓励大家尝试性能面板，并将其作为日常工作流程的一部分。

了解更多关于我们最新的 React Native DevTools 功能和 React 性能跟踪。

新的桌面应用​

以前，React Native DevTools 在浏览器窗口中启动，需要安装 Chrome 或 Edge。今天，我们通过我们全新的捆绑桌面应用，带来了大大改进的桌面体验。它具有：

  • 与之前相同的零安装设置，现在无需网页浏览器。
  • 更快的启动，通过轻量级且经过签名的桌面二进制文件。在极少数情况下（例如公司防火墙），如果无法下载，我们将回退到之前的浏览器启动流程。
  • 更好的窗口管理，具有改进的 macOS 多任务处理、断点时自动置顶、重新连接到同一应用时自动置顶，以及重新启动时保存的窗口布局。
  • 提高的可靠性，通过将 DevTools 与您的个人浏览器配置文件分开运行。特别是，这解决了我们收到的关于某些预装 Chrome 扩展程序导致 React Native DevTools 损坏的 bug 报告。

React Native DevTools icon in the macOS Dock

Intersection Observers (Canary)​

作为我们将 Web API 引入 React Native 的努力的一部分，我们在 0.83 版本的 Canary 版本中添加了对 IntersectionObserver 的支持。

IntersectionObserver 允许您异步观察目标元素与其祖先之间的布局交叉点。有关更多详细信息，请参阅我们的 API 和 实现文档。我们还在 RNTester 中包含了 示例。

其他更改​

Web Performance API 已稳定​

如 0.82 版本中所述，React Native 现在实现了 Web 上可用的 Performance APIs 的一个子集 — — 现在已作为稳定版发布。

  • High Resolution Time：定义 performance.now() 和 performance.timeOrigin。
  • Performance Timeline：定义 PerformanceObserver 和访问性能对象中的性能条目的方法（getEntries()、getEntriesByType()、getEntriesByName()）。
  • User Timing：定义 performance.mark 和 performance.measure。
  • Event Timing API：定义报告给 PerformanceObserver 的 event 条目类型。
  • Long Tasks API：定义报告给 PerformanceObserver 的 longtask 条目类型。

这些 API 允许跟踪应用程序中性能的各个方面，这些方面可以在 React Native DevTools 的性能面板中看到，也可以在运行时通过 PerformanceObserver 查看。

PerformanceObserver 在生产构建中也有效，为捕获应用程序中真实世界的性能指标开辟了新的机会。

实验性 — Hermes V1​

Hermes logo

Hermes V1 是 Hermes 的下一代演进，在编译器和 VM 方面都有改进，显著提高了 JavaScript 性能。

在 React Native 0.82 版本中，我们发布了 Hermes V1 作为实验性可选功能。而在 0.83 版本中，Hermes V1 包含进一步的性能改进。

💡 启用 Hermes V1

注意：由于 Hermes V1 处于实验阶段，您需要从源代码构建 React Native 才能进行尝试。

要尝试在您自己的项目中启用 Hermes V1，请执行以下步骤：

  1. 通过修改 `package.json` 文件中的相应部分，强制您的包管理器解析 Hermes V1 编译器包的实验版本（请注意，当前的命名约定仅适用于 Hermes V1 的实验阶段）。
package.json
"resolutions": { "hermes-compiler": "250829098.0.4" }

  1. 通过在 android/gradle.properties 中添加 `hermesV1Enabled=true` 为 Android 启用 Hermes V1。

    android/gradle.properties
    hermesV1Enabled=true

    另外，通过编辑 `android/settings.gradle` 配置 React Native 从源代码构建。

    android/settings.gradle
      includeBuild('../node_modules/react-native') {
          dependencySubstitution {
              substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
              substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
              substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
          }
      }

  2. 通过设置 `RCT_HERMES_V1_ENABLED=1` 环境变量安装 pod 来为 iOS 启用 Hermes V1。

    RCT_HERMES_V1_ENABLED=1 bundle exec pod install

    请记住，Hermes V1 与预编译的 React Native 版本不兼容，因此在安装 pod 时请确保不使用 RCT_USE_PREBUILT_RNCORE 标志。

  3. 要确认您的应用程序是否正在运行 Hermes V1，请在您的应用程序或 DevTools 控制台中执行以下代码。此代码将返回 Hermes 版本，该版本应与第 1 步中指定的版本（250829098.0.1）匹配。

    // expecting "250829098.0.1" in Hermes V1
    HermesInternal.getRuntimeProperties()['OSS Release Version'];

实验性 — 移除 iOS 上的旧版架构​

在此版本中，我们为 iOS 添加了一个新标志，允许您从代码库中移除旧版架构。如果您的应用程序已迁移到新架构，您可以通过安装 pod 来尝试移除旧版架构代码：

RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod install

这应该会缩短构建时间并减小应用程序的大小。改进程度取决于您使用的第三方库数量：在我们的测试中，使用没有依赖项的新应用程序，构建时间从 73.0 秒减少到 58.2 秒，应用程序大小从 51.2 Mb 减少到 48.2 Mb。

信息

RCT_REMOVE_LEGACY_ARCH 与 React Native 预编译二进制文件不兼容。如果您使用预编译二进制文件，您需要重新安装 pod 并从源代码构建应用程序。

实验性 — 调试 iOS 上的预编译二进制文件​

在此版本中，我们实现了调试随预编译二进制文件一起分发的 React Native 代码的功能。这主要对库维护者或您在开发原生模块或原生组件时很有帮助。

要调试随 React Native 预编译二进制文件分发的二进制代码，请执行以下步骤：

# From the ios folder of your project
bundle exec pod cache clean --all
bundle exec pod deintegrate
RCT_USE_RN_DEP=1 RCT_USE_PREBUILT_RNCORE=1
RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS=1 bundle exec pod install
open <your-project>.xcworkspace

通过 `RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS` 标志实现神奇效果，该标志指示 CocoaPods 下载 React Native dSYM 文件并将其解压到正确文件夹。

此时，您可以在应用程序中设置一个断点，例如在 AppDelegate.swift 中，然后从 Xcode 构建并运行应用程序。

当应用程序暂停时，打开 Xcode 控制台并运行 LLDB 命令：

# If you are running the app in the simulator
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64_x86_64-simulator/React.framework/dSYMs/React.framework.dSYM

# If you are running the app on a physical device
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64/React.framework/dSYMs/React.framework.dSYM

现在您可以单步调试 React Native 代码。

重大变更​

我们正在努力使 React Native 的发布更加可预测且易于升级。React Native 0.83 是第一个没有面向用户的破坏性更改的版本。

如果您使用的是 React Native 0.82，您应该能够将应用程序升级到 React Native 0.83，而无需更改应用程序代码。

要了解我们如何定义破坏性更改，请参阅这篇文章。

弃用​

此版本包含两个 Android 特定的弃用项：

  • 网络：sendRequestInternal 方法正在被淘汰，现已弃用。
  • 动画：startOperationBatch 和 finishOperationBatch 现已弃用。

致谢​

React Native 0.83 包含来自 56 位贡献者的 594 多个提交。感谢大家的辛勤工作！

我们要特别感谢在此版本中做出重大贡献的社区成员

升级到 0.83​

请使用 React Native Upgrade Helper 查看现有项目在 React Native 版本之间的代码更改，并参考 升级文档。

要创建新项目

npx @react-native-community/cli@latest init MyProject --version latest

如果您使用 Expo，React Native 0.83 将在 SDK 55 中提供，该版本将于 2026 年 1 月发布。

支持的版本​

0.83 是 React Native 的最新稳定版本，0.80.x 已进入不支持状态。有关更多信息，请参阅 React Native 的支持策略。