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