React Native
新架构
告别 Bridge，拥抱 JSI。Fabric 渲染器、TurboModules、Codegen 三大支柱如何彻底重塑 React Native 的性能基线与开发体验？本文将从架构原理到数据流，为你拆解每一个核心模块。
旧架构 vs 新架构
从异步 Bridge 到同步 JSI，这是一次彻底的底层革命
旧架构 (Bridge)
新架构 (JSI)
新架构核心模块
JSI · Fabric · TurboModules 构成了新架构的完整骨架
JSI
JSI 是新架构的基石。它取代了旧的 Bridge，允许 JavaScript 引擎直接持有对 C++ 宿主对象的引用。JS 可以像调用普通对象方法一样同步调用原生功能，无需 JSON 序列化，也无需异步等待。
// JSI HostObject — JS 端可直接调用的方法
class NativeCalculator : public jsi::HostObject {
jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& name) override {
auto methodName = name.utf8(rt);
if (methodName == "add") {
// 返回一个 JS 可直接调用的函数
return jsi::Function::createFromHostFunction(
rt, name, 2,
[](jsi::Runtime& rt, const jsi::Value& thisVal,
const jsi::Value* args, size_t count) -> jsi::Value {
double a = args[0].getNumber(); // 同步读取！
double b = args[1].getNumber();
return jsi::Value(a + b); // 同步返回！
}
);
}
return jsi::Value::undefined();
}
};Fabric
全新的渲染系统，将 Shadow Tree 的构建从 Java/Objective-C 迁移到 C++， 实现跨平台共享和并发渲染。
TurboModules
取代旧的 NativeModules 系统，通过 JSI 实现同步调用，支持懒加载，大幅优化启动性能。
Fabric 渲染器深度拆解
新的渲染流水线如何实现并发渲染和更好的用户体验
Fabric 渲染流水线
Shadow Tree C++ 化
旧架构中，Shadow Tree 在 Android (Java) 和 iOS (ObjC) 各自独立实现。Fabric 将其统一到 C++ 层，这意味着：
- 1跨平台一致的布局计算逻辑
- 2利用 C++ 多线程能力并发构建
- 3减少平台特定 bug 和维护成本
- 4Shadow Tree 与 JS 运行时同进程访问
并发渲染能力
Fabric 引入了类似 React 18 的并发特性，允许渲染工作在优先级调度下进行：
TurboModules 与 Codegen
按需加载、同步调用、编译期类型安全
TurboModules
| 特性 | 旧 NativeModules | TurboModules |
|---|---|---|
| 加载时机 | 启动时全量加载 | 按需懒加载 ✓ |
| 通信方式 | 异步 Bridge | JSI 同步调用 ✓ |
| 类型检查 | 运行时 | 编译期 (Codegen) ✓ |
| 方法签名 | 手写原生代码 | 自动生成代码 ✓ |
| 性能 | JSON 序列化 | 直接内存访问 ✓ |
// TurboModule Spec — Codegen 会据此生成原生接口
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
// 同步方法 — 直接返回值，无 Bridge 延迟
getConstants(): {
screenWidth: number;
screenHeight: number;
isTablet: boolean;
};
// 异步方法 — 返回 Promise
fetchUserData(userId: string): Promise<{
name: string;
email: string;
avatar: string;
}>;
// 带回调的方法
addListener(eventName: string): void;
removeListeners(count: number): void;
}
// 懒加载：仅在首次调用时初始化原生模块
export default TurboModuleRegistry.getEnforcing<Spec>(
'NativeUserModule'
);Codegen
Codegen 读取 TypeScript / Flow 的类型定义 (Spec)，在编译期自动生成平台特定的胶水代码， 消除手写序列化逻辑和运行时类型错误。
RNUserModuleSpec.h / .mmNativeUserModuleSpec.javaJSI 互操作接口启用新架构只需在 react-native.config.js 中设置newArchEnabled: true，并确保 Hermes 引擎已启用。
新架构完整数据流
从 React 组件到原生像素的全链路追踪
如何迁移到新架构
分步骤、零停机的渐进式迁移策略
升级 React Native
确保使用 RN 0.76+，Hermes 引擎已启用
迁移 NativeModules → TurboModules
为每个模块创建 TurboModule Spec，使用 Codegen 生成代码
适配 Fabric 渲染器
更新自定义原生组件以兼容 Fabric 的 C++ 渲染管线
全量启用新架构
在生产环境开启 newArchEnabled 标志，监控性能指标
迁移检查清单
新架构提供了 Interop Layer，允许未迁移的旧模块在新架构下继续工作。 这意味着你可以逐步迁移，而不必一次性重写所有原生代码。但性能优化仅限于已迁移的模块。
核心要点速览
记住这几点，你就掌握了新架构的精髓
JSI 替代 Bridge
C++ 层实现 JS ↔ Native 的同步直接调用，告别 JSON 序列化和异步等待
Fabric 并发渲染
C++ Shadow Tree + 优先级调度，实现流畅的并发 UI 更新
TurboModules 懒加载
原生模块按需初始化，启动时间缩短 40%，内存占用降低 30%
Codegen 类型安全
编译期从 TypeScript Spec 自动生成原生接口代码，消灭运行时类型错误