illegalCreed

中文

English

中文

English

Appearance

React Native 新架构深潜 ​

基于 React Native 0.86 · 核于 2026-07

速查 ​

  • 为何弃 Bridge：旧架构靠异步 Bridge 传序列化成 JSON 的消息，三痛点＝序列化开销、全异步（布局跳变）、高频大数据瓶颈（相机每帧数十 MB 扛不住）
  • JSI（地基）：C++ 接口，让 JS↔C++ 直接互相持有引用、同步调用，消除序列化；不绑定具体 JS 引擎
  • Fabric（新渲染器，替 Paper）：C++ 统一核心 + Shadow Tree，Render→Commit→Mount；带来同步布局（消跳变）+ React 18/19 并发（Suspense/Transitions/自动批处理）+ 视图扁平化 + 懒初始化
  • TurboModules（新原生模块）：JSI 同步、类型安全、懒加载；spec 以 Native 前缀、extends TurboModule，放 specs/
  • Codegen：构建期从 TS/Flow spec 生成 C++/Java/ObjC++ 胶水，保 JS↔原生类型安全；配 package.json 的 codegenConfig（type: modules|components）
  • Bridgeless：彻底不建桥；0.73 实验 → 0.74 新架构下默认 → 0.82 唯一模式
  • Yoga：跨平台 Flexbox 布局引擎（C/C++），把样式算成坐标
  • Hermes：默认 JS 引擎，AOT 把 JS 预编译成字节码（.hbc）→ 更快启动/更低内存/更小包；global.HermesInternal 判断，性能看 release build
  • 版本口诀：0.68 实验 → 0.74 Bridgeless 默认 → 0.76 默认 → 0.82 强制不可关；可关的最后版本＝0.81（Expo SDK 54）
  • 重要提醒：新架构不保证立刻变快——需重构才能吃到同步布局/并发红利

一、为什么要替换旧架构（Bridge） ​

旧架构（俗称 Paper 时代）在 JS 线程与原生线程之间架了一条异步 Bridge，所有跨语言通信都要把数据序列化成 JSON 再传。这套模型有三个结构性痛点：

  1. 序列化开销：每一次 JS↔原生的数据往返都要 JSON 编解码，量大时开销显著。
  2. 强制全异步：无法同步读取布局或调用原生。典型后果是「先渲染出错误尺寸，下一帧再纠正」的布局跳变（layout jank）。
  3. 高频/大数据瓶颈：相机预览每帧可能几十 MB、每秒上 GB，Bridge 的序列化 + 异步根本扛不住。

新架构的整体思路：用 JSI 直接内存互引替代序列化 Bridge，并在其上重建渲染器（Fabric）、原生模块（TurboModules）、类型安全（Codegen），最终彻底不建桥（Bridgeless）。

二、JSI：新架构的地基 ​

JSI（JavaScript Interface） 是一层用 C++ 写的接口，核心能力是让 JS 能直接持有 C++ 对象的引用、C++ 也能持有 JS 的引用，从而同步调用彼此的方法、消除 JSON 序列化。

  • 收益：同步互操作、可暴露复杂类型（数据库句柄、图像、音频样本），支撑实时高频场景（如 VisionCamera 逐帧处理）。
  • 关键性质：JSI 不依赖某个特定 JS 引擎——它是架在 Hermes/JSC 之上的抽象层。这也是为什么切换引擎不影响上层。

三、Fabric：新渲染器 ​

Fabric 取代旧渲染器 Paper，把渲染逻辑集中到跨平台 C++ 核心：

  • Shadow Tree（影子树）：React 组件的中间表示，用于布局计算；布局由 Yoga 算。
  • 三阶段管线：Render（构建/更新影子树）→ Commit（提交、算布局）→ Mount（挂载为原生视图）。
  • 关键收益：
    • 同步布局与测量（线程安全）→ 消除嵌入原生视图时的跳变；useLayoutEffect 可在同一 commit 内测量并更新。
    • 完整支持 React 18/19 并发：Suspense、Transitions（useTransition/startTransition）、自动批处理。
    • View Flattening（视图扁平化）：原为 Android 优化，现所有平台默认，减少无谓层级。
    • 懒初始化 host 组件 → 启动更快。
维度Paper（旧）Fabric（新）
布局异步同步
数据传输序列化 JSONJSI 直接访问
代码各平台各写统一 C++ 核心
启动全量初始化懒初始化
并发有限完整 React 18/19

四、TurboModules 与 Codegen ​

TurboModules（新原生模块） ​

相较旧原生模块（Bridge 异步、无类型、启动即全量初始化、样板手写），TurboModules 全面升级：JSI 同步/低延迟、类型安全、懒加载（首次访问才初始化，改善启动）。

ts
// specs/NativeLocalStorage.ts —— spec 以 Native 前缀命名、extends TurboModule
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null;
}
// getEnforcing：不存在则抛错；get：不存在返回 null
export default TurboModuleRegistry.getEnforcing<Spec>("NativeLocalStorage");

Codegen ​

Codegen 在构建期（每次 build iOS/Android 都触发）从类型化的 spec 生成 C++ 胶水 + Android(Java) + iOS(ObjC++) 样板，为 TurboModules 与 Fabric Native Components 服务，并保证 JS↔原生类型安全（不匹配就编译报错）。

json
// package.json
{
  "codegenConfig": {
    "name": "NativeLocalStorageSpec",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": { "javaPackageName": "com.nativelocalstorage" }
  }
}

无 UI 的纯逻辑用 TurboModules；包裹原生 UI 控件用 Fabric Native Components（codegenNativeComponent，type: "components"）。

五、Bridgeless 与 Yoga ​

  • Bridgeless（无桥模式）：完全用 JSI + TurboModules + Fabric，彻底不创建 bridge。0.73 实验、0.74 起在新架构下默认、0.82 起随强制新架构成为唯一模式；为兼容旧模块/旧组件提供 Interop Layer（互操作层）。
  • Yoga：跨平台 Flexbox 布局引擎（C/C++），Fabric 用它把 Flexbox 样式算成具体坐标；持续向 Web 对齐（Playground：yogalayout.dev）。

六、Hermes 引擎 ​

Hermes 是 Meta 为 RN 定制的开源 JS 引擎，默认开启且每个 RN 版本内置匹配版本（bundled Hermes）：

  • 核心机制：AOT 字节码预编译——构建期把 JS 编成 Hermes Bytecode（.hbc），省去设备端解析/编译 → 更快启动、更低内存、更小包体。
  • 验证是否启用：const isHermes = () => !!global.HermesInternal;；性能收益要在 release build 才准（dev 模式本身拖慢 JS）。
  • 切回 JavaScriptCore 走社区包 react-native-community/javascriptcore。

七、版本时间线与开关 ​

版本时间里程碑
0.682022新架构首次可实验性 opt-in
0.732023-12Bridgeless Mode 首次引入（实验）
0.742024-04Bridgeless 成为新架构下默认
0.762024-10新架构成为所有项目默认、production-ready
0.822025-10首个完全运行在新架构上；旧架构开关移除、newArchEnabled 失效
0.85 / 0.862026新架构专属时代，持续清理 legacy
  • 可 opt-out 的最后版本＝0.81（Expo SDK 54）；0.82 起强制、不可关（Expo SDK 55 起）。
  • 0.76–0.81 临时关闭：Android 改 android/gradle.properties 的 newArchEnabled=false；iOS 在 ios/Podfile 顶部设 ENV['RCT_NEW_ARCH_ENABLED'] = '0' 后 pod install。
  • ⚠️ 新架构不保证立即变快：同步布局/并发红利需重构才能吃到；若瓶颈本不在序列化，收益有限。

八、四大件一句话回顾 ​

  • JSI：JS↔C++ 直接互引、同步调用，替代序列化 Bridge。
  • Fabric：C++ 统一新渲染器，同步布局 + React 并发。
  • TurboModules：JSI 原生模块，类型安全 + 懒加载。
  • Codegen：构建期从 spec 生成原生胶水，保类型安全。
  • 配角：Bridgeless（彻底不建桥）、Yoga（Flexbox 布局引擎）、Hermes（默认引擎、AOT 字节码）。