React Native 核心架构

新架构概述

React Native 新架构（0.68+）带来了重大变革：

JSI (JavaScript Interface)

// 旧架构：通过 Bridge 异步通信
// 新架构：JSI 直接同步调用

// C++ 层暴露的原生方法可直接被 JS 调用
global.nativePerformanceNow() // 同步获取高精度时间

核心优势：

• 同步调用原生代码
• 共享内存，避免序列化开销
• 支持 C++ 原生模块

Fabric 渲染器

┌─────────────────────────────────────────────────────┐
│                    React 组件树                      │
└─────────────────────┬───────────────────────────────┘
                      │ Fiber Reconciler
┌─────────────────────▼───────────────────────────────┐
│                   Shadow Tree                        │
│            (C++ 层，跨线程共享)                       │
└─────────────────────┬───────────────────────────────┘
                      │ Yoga 布局引擎
┌─────────────────────▼───────────────────────────────┐
│                  原生视图树                          │
│           (iOS UIView / Android View)               │
└─────────────────────────────────────────────────────┘

关键特性：

• 同步布局计算
• 优先级渲染
• 支持 Suspense 和 Concurrent Mode

TurboModules

// 定义 TurboModule Spec
import { TurboModule, TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getConstants(): { version: string };
  multiply(a: number, b: number): Promise<number>;
  multiplySync(a: number, b: number): number; // 同步方法
}

export default TurboModuleRegistry.getEnforcing<Spec>('Calculator');

优势：

• 懒加载：按需加载原生模块
• 类型安全：通过 CodeGen 生成类型
• 同步方法：支持同步调用原生代码

线程模型

┌────────────────┐  ┌────────────────┐  ┌────────────────┐
│   JS Thread    │  │   UI Thread    │  │ Background     │
│                │  │                │  │ Thread         │
│ - React 渲染   │  │ - 原生 UI 更新 │  │ - 原生模块     │
│ - 业务逻辑     │  │ - 手势处理     │  │ - 网络请求     │
│ - 状态管理     │  │ - 动画         │  │ - 数据处理     │
└───────┬────────┘  └───────┬────────┘  └───────┬────────┘
        │                   │                   │
        └───────────────────┴───────────────────┘
                    JSI / Fabric 共享内存

与 Web React 的差异

特性	React Web	React Native
渲染目标	DOM	原生组件
样式	CSS	StyleSheet (Flexbox 子集)
事件	DOM Events	手势系统
动画	CSS/JS	Animated/Reanimated
导航	React Router	React Navigation

面试要点

1. 新架构三大支柱：JSI、Fabric、TurboModules
2. 性能提升原因：同步通信、共享内存、懒加载
3. 线程模型：JS/UI/Background 三线程协作
4. 与旧架构对比：Bridge 异步 vs JSI 同步