请解释 React Native 的新架构（Fabric 和 TurboModules）与旧架构的主要区别

React Native 的新架构（Fabric 和 TurboModules）是对旧架构的重大革新，主要解决了旧架构在性能、线程模型和原生互操作性等方面的瓶颈。以下是新旧架构的核心区别：

---

1. 线程模型与异步通信

旧架构：

• 三层线程模型：
  • JavaScript 线程：运行 React 逻辑和业务代码（单线程）
  • 原生（UI）线程：处理原生渲染和用户交互
  • Shadow 线程：计算布局（Yoga）
• 通信方式：通过 Bridge 进行异步 JSON 序列化通信，存在序列化/反序列化开销，且所有通信都是异步的，导致响应延迟。

新架构：

• 简化线程模型：
  • JavaScript 线程和 UI 线程可以直接通信，移除 Shadow 线程。
• 同步能力：通过 JSI（JavaScript Interface） 实现 JavaScript 与原生代码的直接调用（无需序列化），支持同步操作（如优先级更高的 UI 更新）。

---

2. 渲染系统（Fabric）

旧架构：

• 异步渲染：React 生成的虚拟 DOM 需要通过 Bridge 传递到原生端，由原生组件按顺序渲染，导致瀑布式渲染延迟（如列表卡顿）。
• 组件树管理：由原生端控制，JavaScript 端无法直接干预。

新架构（Fabric）：

• 同步渲染：通过 JSI 直接调用原生方法，实现 JavaScript 和原生 UI 线程的同步渲染。
• 更细粒度控制：
  • 支持 React Suspense 和并发渲染。
  • 允许 JavaScript 端直接操作 Shadow Tree（布局计算结果），减少通信开销。
• 性能提升：首屏渲染速度更快，列表滚动更流畅。

---

3. 原生模块（TurboModules）

旧架构：

• 延迟加载：所有原生模块在应用启动时初始化（即使未使用），拖慢启动时间。
• 通信开销：通过 Bridge 调用原生方法需序列化为 JSON，性能较差。
• 强依赖 Bridge：原生模块必须通过 Bridge 注册和调用。

新架构（TurboModules）：

• 按需加载：原生模块仅在首次被 JavaScript 调用时初始化，减少启动时间。
• 直接调用：通过 JSI 暴露原生方法，JavaScript 可直接调用（类似调用 JS 函数），无序列化开销。
• 类型安全：支持代码生成（通过 Codegen）确保 JavaScript 和原生端的类型一致。

---

4. JavaScript 引擎（Hermes 集成）

• 旧架构：默认使用 JavaScriptCore（JSC），在 Android 上性能较差。
• 新架构：深度集成 Hermes 引擎（专为 RN 优化），支持：
  • 预编译字节码减少解析时间。
  • 更低的内存占用和更快的启动速度。

---

5. 向后兼容性

• 旧架构：基于 Bridge 的模块无法直接在新架构中运行。
• 新架构：通过 兼容层 支持旧模块逐步迁移，但需要重构原生模块以适配 JSI。

---

核心优势总结

方面	旧架构	新架构
通信方式	Bridge（异步 JSON 序列化）	JSI（直接同步调用）
渲染性能	异步瀑布流，易卡顿	同步渲染，支持并发更新
原生模块加载	启动时全量初始化	按需懒加载
线程模型	三线程，通信复杂	简化线程，直接交互
调试支持	依赖 Remote JS 调试	更好的 Flipper 集成

---

迁移建议

• 新项目：直接使用新架构（React Native 0.68+ 默认开启）。
• 旧项目迁移：
  1. 确保所有原生模块适配 TurboModules 规范。
  2. 逐步替换依赖 Bridge 的第三方库。
  3. 启用 Hermes 和 Codegen 优化性能。

新架构显著提升了 React Native 的性能上限，使其更接近原生应用的体验，尤其适合复杂交互和高性能要求的场景（如游戏、AR、高频数据更新应用）。React Native 的新架构（Fabric 渲染器 + TurboModules）是自 0.68 版本起逐步引入的重大升级，旨在解决旧架构的性能瓶颈和维护复杂性。以下是新旧架构的核心区别：

一、架构层级对比

旧架构（React Native <= 0.67）

1. 桥接层（Bridge）

   • JavaScript 与原生代码通过异步消息队列通信（RCTBridge）。
   • 所有调用需序列化后跨线程传输，导致高延迟和阻塞 UI 线程。

2. 渲染流程

   • React 组件树在 JS 线程计算，通过桥接层转换为原生视图（ViewManager）。
   • 渲染过程依赖批处理，复杂 UI 更新时易卡顿。

3. 模块调用

   • Native Module 需通过桥接层注册，初始化成本高（如初始化所有模块）。

新架构（Fabric + TurboModules）

1. 新渲染器：Fabric

   • 直接在原生端维护组件树状态，减少 JS 与原生的通信。
   • 支持同步渲染（如 useSyncExternalStore）和细粒度更新。

2. 新模块系统：TurboModules

   • 支持按需加载 Native Module，无需全局初始化。
   • 同步调用（部分场景），大幅提升模块性能。

3. 并发模型

   • 基于 React 18 的并发特性，支持中断渲染和优先级调度。

二、性能优化

旧架构痛点

• 桥接层瓶颈：频繁通信导致动画、手势等交互卡顿。
• 单线程渲染：JS 线程繁忙时（如复杂计算），UI 更新会被阻塞。

新架构改进

1. Fabric 渲染优化

   • 增量更新：仅更新变化的组件，减少通信量。
   • 原生端状态管理：复杂 UI （如长列表）的滚动性能显著提升。

2. TurboModules 调用优化

   • 同步调用：简单方法可直接在原生执行（如获取设备信息）。
   • 懒加载：仅在使用时初始化模块，减少启动时间。

3. Hermes 引擎协同

   • 新架构与 Hermes 引擎深度优化，进一步减少内存占用和提升 JS 执行速度。

三、开发体验提升

旧架构限制

• Native Module 开发复杂，需编写大量样板代码。
• 调试困难：JS 与原生通信错误难以追踪。

新架构改进

1. TurboModules 开发简化

   • 支持自动生成绑定代码（通过 Codegen），减少手动编写 Native Module 的工作量。
   • 更好的 TypeScript 支持。

2. 调试增强

   • 更清晰的错误堆栈信息，直接关联到具体组件。
   • Flipper 等工具的集成优化。

3. 并发特性

   • 支持 Suspense、过渡动画（Transitions）等 React 18 新特性。

四、原生集成差异

旧架构集成方式

• Native UI 组件需通过 ViewManager 注册，逻辑分散。
• 原生模块初始化时需注册到全局桥接层。

新架构集成方式

1. Fabric 组件

   • 原生视图直接实现 RCTComponentViewProtocol，支持更灵活的生命周期管理。
   • 支持原生端的状态恢复（如屏幕旋转）。

2. TurboModules

   • 模块按需加载，无需全局注册。
   • 支持同步和异步调用模式，通过 TurboModuleRegistry 访问。

五、兼容性与迁移

• 旧代码兼容：新架构支持逐步迁移，现有代码仍可运行。
• 迁移成本：
  • 自定义 Native Module 需要重构为 TurboModule。
  • 部分旧版 API（如 Animated 的某些用法）需更新。
• 官方工具：提供迁移指南和自动转换脚本（如 react-native new-architecture-cli）。

六、关键对比表

特性	旧架构	新架构（Fabric + TurboModules）
渲染模式	批处理，依赖 JS 线程	增量更新，原生端维护状态
模块调用	异步桥接，全局初始化	按需加载，支持同步调用
并发支持	不支持	支持 React 18 并发特性
Native Module 开发	手动编写桥接代码	自动生成绑定（Codegen）
启动性能	初始化所有模块	按需加载模块
复杂 UI 性能	长列表滚动易卡顿	显著优化（原生端渲染）

总结

新架构通过 Fabric 渲染器 和 TurboModules 解决了旧架构的通信瓶颈，提升了性能、简化了开发，并支持 React 的最新特性。对于大型项目和性能敏感场景（如动画、高频交互），新架构的优势尤为明显。