## 🌐 背景与设计初衷
### 旧架构的阻碍
- **Bridge 瓶颈**：JSON 序列化带来高延迟。
- **异步不透明**：JS 无法同步获取原生状态。
- **启动缓慢**：模块全量初始化导致内存激增。

### 新架构的愿景
- **零损耗通信**：JSI 直接内存共享与同步调用。
- **并发渲染**：Fabric 渲染器解决 UI 闪烁与阻塞。
- **按需加载**：Turbo Modules 实现真正的懒加载。

---

## 🕰 演进时间轴
- **0.68**：新架构作为可选功能。
- **0.76**：默认开启，正式进入新架构时代。
- **0.82**：全面废弃旧架构。
- **未来**：无限趋近原生性能。

配置示例：
- Android → `gradle.properties: newArchEnabled=true`
- iOS → `Podfile: ENV['RCT_NEW_ARCH_ENABLED'] = '1'`

---

## ⚖️ 新旧架构对比

| 特性              | 旧架构 (Bridge)                  | 新架构 (JSI/Fabric/TurboModules) |
|-------------------|----------------------------------|----------------------------------|
| 通信方式          | JSON 序列化 + 异步消息队列        | JSI 内存直连 + 同步调用           |
| 渲染引擎          | JS 线程驱动，易阻塞               | Fabric 渲染器，C++影子树并发渲染  |
| 模块加载          | 全量初始化，启动慢                | Turbo Modules 懒加载，按需调用    |
| 类型安全          | 手写桥接，运行时易出错            | Codegen 自动生成，编译期校验      |
| 性能表现          | 启动慢，交互延迟                  | 启动快，交互流畅，接近原生性能    |

---

## 🚀 量化收益（RN 0.76 官方基准）
- **模块解析速度**：提升 15x
- **热构建速度**：提升 4x
- **Android 应用体积**：减少约 20%
- **冷启动中位值**：提升约 8%

---

## 🔑 核心技术支柱
1. **JSI**：取代 Bridge，实现 JS 与 Native 零距离交互。
2. **Fabric**：同步布局，支持 React 18 并发渲染。
3. **Turbo Modules**：懒加载原生模块，降低启动开销。
4. **C++ 底层统一**：减少双端差异，提升执行效率。
5. **Codegen**：自动生成跨端接口代码，保证类型安全。

---

## 🧩 Bridgeless 模式
- 完全去除异步消息队列。
- 所有通信直接跑在 JSI 上。
- 高频事件响应性能无限趋近原生。

---

## 🎨 Fabric 与并发渲染
- **同步布局测量**：解决界面跳动与闪烁。
- **React 18 并发模式**：
  - `useTransition` / `useDeferredValue` → 推迟非紧急更新。
  - `Suspense` + Atomic Commit → 后台准备 UI，保持一致性。

---

## ⚡ Turbo Modules
- **懒加载机制**：仅在首次 require 时实例化。
- **启动加速**：显著降低 CPU 与内存占用。

---

## 🛡️ Codegen
- **旧架构**：手写桥接逻辑，易出错。
- **新架构**：TS/Flow 定义 Spec → 自动生成 C++ 样板代码。
- **优势**：
  - 编译期校验，提前拦截错误。
  - 零胶水代码，减少重复劳动。
  - 类型安全，跨端接口一致。

---

## 📚 DEMO 示例
### Fabric 组件
```ts
import {codegenNativeComponent} from 'react-native';

export interface NativeProps {
  title: string;
}

export default codegenNativeComponent<NativeProps>('CustomView');