请解释 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。

核心优势总结

迁移建议

• 新项目：直接使用新架构（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 解决了旧架构的通信瓶颈，提升了性能、简化了开发，并支持 React 的最新特性。对于大型项目和性能敏感场景（如动画、高频交互），新架构的优势尤为明显。