新架构 vs 旧架构

相关源文件

• CHANGELOG-pre-060.md
• CHANGELOG-pre-070.md
• CHANGELOG.md
• LICENSE
• README.md
• packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxMessage-test.js
• packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxMessage-test.js.snap
• packages/react-native/Libraries/Utilities/PerformanceLoggerContext.js
• packages/react-native/ReactAndroid/README.md
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactActivity.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactDelegate.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactHost.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/ActivityEventListener.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BaseActivityEventListener.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeReactContext.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactContext.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/BridgelessReactContext.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ComponentNameResolverBinding.kt
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ThemedReactContext.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIConstantsProviderBinding.kt
• packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp
• packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.h
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsDefaults.h
• packages/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.cpp
• packages/react-native/ReactCommon/react/nativemodule/featureflags/NativeReactNativeFeatureFlags.h
• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js
• packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js
• packages/react-native/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js
• scripts/releases-ci/README.md

此页面将 React Native 的旧架构（基于 Bridge）与其新架构（无 Bridge）进行了比较。它概述了两种架构的核心组件、它们之间的主要区别，并描述了用于控制迁移的特性标志系统。

有关使用新架构设置项目的更多信息，请参阅此 wiki 中的其他指南。

概述

React Native 的架构演进是由解决性能限制、改善开发者体验和实现与原生平台的更紧密集成而驱动的。从旧（Bridge）架构到新（Bridgeless）架构的过渡，代表了 React Native 应用程序在 JavaScript 和原生代码之间通信方式的根本性转变。

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeReactContext.java

旧架构 (Bridge)

React Native 的旧架构使用 Bridge 来实现 JavaScript 和原生代码之间的通信。自创建以来，这种设计一直是 React Native 的基础。

核心组件

ReactInstanceManager

在旧架构中，ReactInstanceManager 是管理 React Native 运行时环境的入口点。

• 创建和管理 CatalystInstance
• 管理生命周期状态（恢复、暂停、销毁）
• 协调 React 组件的挂载和渲染
• 处理 bundle 加载和 JavaScript 执行

CatalystInstance

JavaScript 和原生代码之间的桥梁

• 在 JavaScript 和原生代码之间传递序列化的 JSON 消息
• 处理所有跨平台通信
• 管理 JavaScript 执行环境

BridgeReactContext

提供对原生模块和原生环境访问的上下文

• 从 JavaScript 提供对原生模块的访问
• 处理事件分派
• 管理生命周期事件

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java144-447
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeReactContext.java

局限性

旧架构存在一些限制，这促使了新架构的开发

1. 性能开销：所有通信都需要进行 JSON 序列化/反序列化
2. 异步通信：所有原生调用本质上都是异步的
3. 线程挑战：操作需要进行多次线程跳转
4. 类型安全有限：依赖运行时类型检查
5. 批处理限制：UI 更新基于帧进行批处理，可能导致延迟

新架构 (Bridgeless)

新架构，通常称为“Bridgeless”，通过引入多项重大改进来解决旧架构的限制。

核心组件

ReactHost

ReactHost 是新架构的主要入口点，取代了 ReactInstanceManager。

• 管理 React Native 实例生命周期
• 处理 surface 的创建和管理
• 在 JavaScript 和原生代码之间进行协调
• 提供更强大的 API 来控制 React Native 环境

JavaScript Interface (JSI)

JSI 是一个核心组件，支持 JavaScript 和原生代码之间的直接方法调用。

• 从 JavaScript 直接访问 C++ 对象
• 消除了 JSON 序列化/反序列化的开销
• 实现同步通信
• 作为 TurboModules 和 Fabric 的基础

TurboModules

TurboModules 是新架构下处理原生模块的方式。

• 通过 CodeGen 从 TypeScript 定义生成
• 按需懒加载
• 通过 JSI 直接通信，避免 Bridge 序列化
• 提供改进的类型安全性

Fabric Renderer

Fabric Renderer 取代了旧的 UIManager 来渲染 React 组件。

• 跨平台实现一致性的 C++ 核心
• 直接 JSI 通信以提高性能
• 更好地支持同步操作
• 使用 Yoga 引擎改进布局计算

BridgelessReactContext

BridgelessReactContext 提供与 BridgeReactContext 类似的功能，但专为新架构设计。

• 适用于 Bridgeless 模式
• 与 ReactHost 而非 ReactInstanceManager 配合使用
• 支持 TurboModules 和 Fabric 组件

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactContext.java37-61
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java93-120

功能标志

从旧架构迁移到新架构的过渡由一套全面的特性标志系统控制。这些标志支持增量式采用新架构组件。

关键架构特性标志

主要特性标志

控制架构的最重要特性标志是：

标志	默认	目的
enableBridgelessArchitecture	false	启用新架构的主开关
enableFabricRenderer	false	启用 Fabric 渲染系统
useTurboModules	false	为原生模块启用 TurboModules
useTurboModuleInterop	false	允许旧模块使用 TurboModule 系统
useFabricInterop	true	允许 Fabric 组件和非 Fabric 组件混合使用

当启用 enableBridgelessArchitecture 时，它会自动启用 enableFabricRenderer 和 useTurboModules。

来源

• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js138-147
• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js179-188
• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js463-472
• packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js46-89

使用特性标志

特性标志通过 ReactNativeFeatureFlags API 访问。

在原生代码中

来源

• packages/react-native/internal/featureflags/ReactNativeFeatureFlags.kt84-86
• packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h83-85

实现差异

实例管理

旧架构	新架构
ReactInstanceManager	ReactHost
CatalystInstance	ReactInstance
BridgeReactContext	BridgelessReactContext
ReactRootView	ReactSurface

Activity 集成

React Native 与 Android Activities 的集成已适应以支持这两种架构。

ReactDelegate 类根据架构处理条件性路由到 ReactInstanceManager 或 ReactHost。

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java112-151
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactDelegate.java115-125

组件渲染

在旧架构中，组件通过 UIManager 模块渲染，所有属性更新都进行 JSON 序列化。在新架构中，Fabric Renderer 维护了一个 C++ shadow tree，可以通过 JSI 从 JavaScript 直接访问。

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java261-274
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java354-370

兼容性和迁移

React Native 团队开发了多种机制来促进从旧架构到新架构的迁移。

1. 特性标志：通过特性标志开关进行渐进式采用
2. 互操作层：允许混合使用旧组件和新组件（Fabric Interop, TurboModule Interop）
3. CodeGen：从 TypeScript 定义自动生成新架构绑定

Fabric Interop Layer

Fabric Interop Layer（useFabricInterop 标志）允许旧架构的视图组件在 Fabric 应用程序中工作。

• 允许在 Fabric 应用程序中渲染旧组件
• 为尚未迁移的库提供兼容性
• 处理架构之间的事件分派适配

TurboModule Interop

TurboModule Interop（useTurboModuleInterop 标志）允许旧的原生模块与 TurboModule 系统一起工作。

• 可以通过 TurboModule 系统访问旧的原生模块
• 为未迁移的模块提供向后兼容性
• 充当旧模块系统和新模块系统之间的桥梁

来源

• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js409-418
• packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js452-462

总结

React Native 中从旧架构到新架构的过渡代表了对 JavaScript 和原生代码如何交互方式的根本性重新构想。主要区别可以总结为：

方面	旧架构	新架构
JS 到 Native 通信	带 JSON 序列化的 Bridge	直接 JSI 通信
入口点	ReactInstanceManager	ReactHost
上下文	BridgeReactContext	BridgelessReactContext
原生模块	旧的原生模块	TurboModules
渲染	UIManager	Fabric Renderer
类型安全	有限的运行时检查	通过 CodeGen 增强
通信类型	主要异步	支持同步调用
性能	受限于序列化	通过直接内存访问改进
视图管理	ReactRootView	ReactSurface

特性标志系统支持渐进式采用，互操作层确保了现有应用程序的平滑迁移路径。

来源

• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactDelegate.java61-96
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java
• packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java
• packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js