React Native 新架构实战指南

JSI、Fabric 与 TurboModules 全解析

---

一、为什么要关注新架构

如果你用 React Native 写过应用，大概率遇到过这些问题：列表滚动卡顿、桥接通信有延迟、原生模块初始化慢、复杂交互掉帧。

这些问题的根源，很大程度上在于 RN 旧架构的异步 Bridge（桥接）机制——JS 和原生之间所有通信都要经过一个串行化的消息队列，像两个语言不通的人靠翻译传纸条，天然存在瓶颈。

新架构（New Architecture）从 2018 年立项，到 0.76 版本默认开启，就是为了彻底解决这些问题。它不是一个功能，而是一套底层引擎的全面重构。本文帮你把它的六大支柱讲清楚。

---

二、旧架构的问题：异步 Bridge 的瓶颈

理解新架构的价值，先要看清旧架构的短板。

旧架构下，JS 线程和原生线程之间隔着一层 Bridge：

┌─────────────┐    JSON 序列化消息    ┌──────────────┐
│  JS 线程     │  ◄────────────────►  │  原生线程     │
│  (业务逻辑)  │      异步、批量       │  (UI / 模块)  │
└─────────────┘                      └──────────────┘

三大痛点：

🔹 异步且串行：每次通信都要把数据序列化成 JSON，排队、批量、再反序列化。高频交互（如手势、滚动）会产生明显延迟。

🔹 通信开销大：即使只是读一个布尔值，也要走完整的序列化流程。

🔹 模块启动慢：所有原生模块在启动时一次性初始化，拖慢首屏。

新架构的核心思路就是拆掉这座桥，让 JS 直接和 C++ / 原生对话。

---

三、六大支柱总览

新架构由六个相互配合的部分组成：

支柱	作用	一句话理解
JSI	JS 直接调用 C++	拆桥的关键
Hermes	专为 RN 优化的 JS 引擎	更快启动、更省内存
TurboModules	新的原生模块系统	懒加载 + 同步调用
Fabric	新的 C++ 渲染器	更流畅的 UI
Codegen	类型安全代码生成	消灭手写胶水代码
React 18	并发渲染能力	可中断的更新

下面逐个展开。

---

四、JSI：新架构的地基

4.1 什么是 JSI

JSI（JavaScript Interface）是一层 C++ API，它让 JS 引擎可以直接持有并调用 C++ 对象，反过来 C++ 也能直接调用 JS 函数。

最关键的一点：JSI 调用是同步的，且不需要序列化。JS 直接拿到 C++ 对象的引用，调用就像调用本地函数一样。

旧架构：JS  → 序列化 JSON → Bridge 队列 → 反序列化 → 原生
新架构：JS  → JSI 直接调用 → C++ / 原生（同步、无序列化）

4.2 JSI 的三大特性

🔹 同步：调用立即返回，不再排队等待。

🔹 无序列化：直接传递对象引用，性能开销大幅降低。

🔹 跨引擎：JSI 抽象了 JS 引擎的差异，同一套代码可以在 Hermes、JSC、V8 上运行。

4.3 为什么它是"地基"

因为 TurboModules 和 Fabric 都构建在 JSI 之上。没有 JSI，就没有后续的一切。你可以把它理解为新架构的"操作系统内核"。

---

五、Hermes：专为移动端打造的 JS 引擎

5.1 Hermes 的定位

Hermes 是 Facebook 为 RN 定制的 JS 引擎，目标非常明确：启动快、内存省、体积小。它不是通用浏览器引擎，而是为移动端 App 场景高度优化的引擎。

5.2 核心技术：字节码预编译

传统 JS 引擎（如 JSC）在运行时才解析、编译 JS 代码。Hermes 则在构建阶段就把 JS 编译成字节码（Bytecode），App 打包时直接带上字节码：

🔹 跳过运行时解析：启动时不用再编译源码，直接执行字节码。

🔹 字节码更紧凑：比源码体积更小，加载更快。

🔹 分层执行：Bytecode → IR → JIT，热点代码进一步优化。

Hermes 从 0.70 起在 Android 默认开启，iOS 也已支持，现在是 RN 的默认引擎。

💡 关于 Hermes 对代码保护的意义，可参考本系列《React Native 代码保护实战指南》——字节码同时也是第一道逆向门槛。

---

六、TurboModules：新的原生模块系统

6.1 旧原生模块的问题

旧架构下，JS 调用原生模块要走 Bridge，而且所有模块在启动时一次性加载。哪怕一个模块整个会话都用不到，也要先初始化好。

6.2 TurboModules 的改进

TurboModules 基于 JSI，带来三个关键提升：

🔹 懒加载：模块按需初始化，用到才加载，显著改善启动性能。

🔹 同步调用：对于需要立即返回结果的调用（如 getConstants），可以同步完成。

🔹 类型安全：通过 Spec（接口定义）+ Codegen 自动生成原生代码，杜绝 JS 与原生类型不匹配。

6.3 类型安全如何保证

TurboModule 需要先定义一个 Spec，用 Flow 或 TypeScript 描述模块的接口：

// NativeSampleModule.ts —— Spec 定义
import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface Spec extends TurboModule {
  getString(id: string): string
  add(a: number, b: number): number
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeSampleModule')

Codegen 会读取这个 Spec，自动生成对应的 C++ / Obj-C++ / Java / Kotlin 代码，保证两端类型一致。

---

七、Fabric：新的渲染器

7.1 Fabric 解决了什么

Fabric 是替代旧渲染器（Paper）的新渲染层，用 C++ 统一实现，目标是更流畅的 UI 渲染。

7.2 三棵树模型

Fabric 的核心是"三棵树"：

🔹 React Element Tree：JS 侧的 React 元素树。

🔹 Shadow Tree：C++ 侧的布局树，由 Yoga 计算布局。

🔹 Host View Tree：最终渲染到屏幕的原生视图树。

三棵树之间通过 JSI 高效同步，避免了旧架构下的频繁跨线程通信。

7.3 关键特性

🔹 同步 Commit：布局和渲染的提交从异步改为同步，减少视觉延迟。

🔹 View Flattening（视图扁平化）：自动合并无副作用的嵌套 View，减少原生视图层级，提升渲染性能。

🔹 State 机制：原生状态可以可靠地回传到 JS，为手势、动画等交互提供更精确的同步。

🔹 Yoga 统一布局：iOS 和 Android 共用同一套 C++ 布局引擎，行为一致。

---

八、Codegen：消灭手写胶水代码

在旧架构中，原生模块需要手写大量的"胶水代码"——把 JS 的类型声明和原生代码手动对齐，繁琐且容易出错。

Codegen 的解决方案是：用一份 Spec（TS / Flow 定义）作为唯一事实来源，自动生成所有原生接口代码。

Spec (TS/Flow)  ──Codegen──►  Obj-C++ (iOS)
                           ►  Java/Kotlin (Android)

配置在 package.json 的 codegenConfig 字段：

{
  "codegenConfig": {
    "name": "AppSpecs",
    "type": "modules",
    "jsSrcsDir": "specs"
  }
}

好处：类型一致、减少样板代码、降低维护成本。

---

九、React 18 并发特性

新架构同时带来了 React 18 的并发能力，让 UI 更新更智能：

🔹 Concurrent Rendering：渲染可中断，高优先级更新（如用户输入）可以打断低优先级更新（如列表加载）。

🔹 Suspense：声明式处理异步加载，数据未就绪时优雅地显示 fallback。

🔹 useTransition / startTransition：标记非紧急更新，让交互始终保持响应。

import { startTransition } from 'react'

// 搜索输入时，把过滤结果的更新标记为低优先级
startTransition(() => {
  setFilteredResults(results)
})

🔹 Automatic Batching：自动批量更新，减少不必要的重渲染。

---

十、如何启用与验证

10.1 启用新架构

Android —— android/gradle.properties：

newArchEnabled=true

iOS —— 安装 Pod 时设置环境变量：

RCT_NEW_ARCH_ENABLED=1 pod install

从 0.76 版本起，新架构默认开启，无需手动配置。如果你的项目还在旧版本，升级到 0.76+ 即可自动获得。

10.2 验证是否生效

运行 App 后，在 JS 里检查：

// 非空说明 Fabric 已启用
console.log(global.nativeFabricUIManager)

或者通过原生侧日志、DevTools 确认。

---

十一、版本里程碑

版本	关键变化
0.68	新架构可选开启
0.70	Hermes 默认（Android）
0.74	Yoga 3、新架构默认推进
0.76	新架构默认开启
0.82	性能与 API 进一步演进

---

十二、迁移注意事项

从旧架构迁移到新架构，有几个坑要留意：

🔹 自定义原生模块要改：旧的原生模块需要按 TurboModule 规范重写，并提供 Spec。

🔹 某些旧库不兼容：少数未适配的第三方库可能报错，需要升级或替换。

🔹 性能未必立即提升：新架构优化的是特定场景（高频交互、长列表、模块懒加载），并非所有 App 都会有可感知的提升。

🔹 先验证再上生产：建议先在灰度环境跑通，重点回归手势、动画、列表等交互。

---

十三、总结

新架构是 RN 走向"成熟原生性能"的关键一步，核心逻辑一句话：用 JSI 拆掉异步 Bridge，让 JS 与原生同步直连，再叠加 Hermes、TurboModules、Fabric、Codegen 和 React 18 共同提升性能与开发体验。

🔹 JSI 是地基，拆掉 Bridge 的通信瓶颈。

🔹 Hermes 加速启动、节省内存。

🔹 TurboModules 让原生模块懒加载、类型安全。

🔹 Fabric 让 UI 渲染更流畅。

🔹 Codegen 消灭手写胶水代码。

🔹 React 18 带来并发渲染能力。

对于开发者而言，0.76 之后新架构已经"开箱即用"。现在正是深入理解它、为团队迁移做好准备的最佳时机。

---

参考资源

🔹 React Native 新架构官方文档：https://reactnative.dev/architecture/overview

🔹 Hermes 引擎：https://hermesengine.dev/

🔹 Fabric 渲染器设计：https://reactnative.dev/architecture/fabric-renderer

🔹 TurboModules 说明：https://reactnative.dev/architecture/turbomodules

💡 提示：新架构仍在快速演进，各 API 细节请以你所用 RN 版本的官方文档为准。