RN启动流程（bundle加载→Bridge初始化→首屏渲染）

可以把React NativeRN启动流程理解成一条链App 启动 ↓ Native 启动 RN ↓ 创建 ReactInstance / Runtime ↓ 加载 JS Bundle ↓ 初始化 Bridge / JSI ↓ 执行 JS ↓ React 创建 Fiber Tree ↓ Shadow Tree / Layout ↓ 提交 UI 更新 ↓ Native 创建原生 View ↓ 首屏显示1. Bundle 加载以 Android 为例Native 启动 RN 后会创建ReactInstanceManager随后准备 JS 执行环境。Bundle 可能来自开发环境 Metro Server ↓ http://localhost:8081/index.bundle 生产环境 assets/index.android.bundle加载完成后JS Bundle 本质上就是一份可以被 JS Runtime 执行的 JavaScript 代码。例如AppRegistry.registerComponent( MyApp, () App );此时只是代码加载进来了还没有真正把 React UI 渲染出来。2. Bridge 初始化这是传统 RN 架构里非常核心的一步。大致可以理解为┌───────────────┐ │ JavaScript │ │ Runtime │ └───────┬───────┘ │ Bridge │ ┌───────▼───────┐ │ Native │ │ Android/iOS │ └───────────────┘JS 和 Native 两边分别有自己的执行环境。例如 JSNativeModules.UserModule.getUser()最终需要把调用传递给 Native。传统 Bridge 的核心特征是JS ↓ 序列化 ↓ Bridge ↓ Native ↓ 执行 ↓ 返回数据 ↓ Bridge ↓ JS所以 Bridge 本质上承担JS ↔ Native 的通信通道3. JS Runtime 启动Bundle 加载之后需要由 JS Runtime 执行。RN 历史上主要使用JavaScriptCore后来 RN 逐渐推广Hermes因此Bundle ↓ Hermes / JSC ↓ 执行 JavaScript然后 JS 世界开始执行 RN 的初始化代码。4. React Root 创建接下来会执行AppRegistry.registerComponent(...)然后 Native 侧启动对应的 React Root。最终进入React ↓ App ↓ View ↓ Text ↓ ...例如function App() { return ( View TextHello RN/Text /View ); }React 会根据组件结构建立自己的Fiber Tree可以简单理解成App │ └── View │ └── Text5. Shadow Tree / LayoutReact 计算出 UI 更新之后还需要确定x y width heightRN 使用 Yoga 做布局计算。例如View style{{ width: 100, height: 50, margin: 10 }} /最终需要计算x 10 y 10 width 100 height 50于是流程进一步变成React Tree ↓ Shadow Tree ↓ Yoga Layout ↓ 计算布局6. UI Commit布局完成后RN 会把需要发生的 UI 变化提交给 Native。传统架构可以粗略理解为JS ↓ 生成 UI 描述 ↓ Bridge ↓ Native ↓ UIManager ↓ 创建 View例如View TextHello/Text /ViewNative 最终可能创建Android ViewGroup └── TextViewiOS 则对应UIView └── UILabel7. 首屏渲染最终 Native UI Tree 创建完成React Component ↓ Fiber Tree ↓ Shadow Tree ↓ Yoga Layout ↓ Commit ↓ Native View ↓ GPU / Render ↓ 首屏显示所以真正的首屏可见并不是 Bundle 加载完成时而是在JS 执行 → React 计算 → Layout → Commit → Native View 创建 → 系统绘制之后。一张完整时序图Native JS │ │ │ 启动 RN │ ├───────────────────────────►│ │ │ │ 创建 JS Runtime │ │───────────────────────────►│ │ │ │ 加载 Bundle │ │───────────────────────────►│ │ │ │ 执行 JS │ │ │ AppRegistry │ │ │ React Root │ │ │ Fiber Tree │ │ │ Shadow Tree │ │ │ Yoga Layout │ │ │◄──── UI Commit ────────────│ │ │ │ 创建 Native View │ │ │ │ Layout / Measure │ │ │ │ Draw │ │ │ │ 首屏 │但要注意新架构已经不是简单的“Bridge”如果你是在准备RN 原理 / 面试 / 性能优化这里非常重要。现代 RN New Architecture 主要涉及旧架构 JS │ │ Bridge │ ▼ Native而新架构更接近JS │ ▼ JSI │ ├── TurboModules │ └── Fabric │ ▼ Native UI也就是React │ Fiber Tree │ React Renderer │ Fabric │ Shadow Tree │ Commit/Layout │ Native UI Tree同时 Native Module 侧JS │ ▼ JSI │ ▼ TurboModule │ ▼ Native因此现在如果问“RN 启动流程Bundle 加载 → Bridge 初始化 → 首屏渲染”更准确的回答应该区分Legacy ArchitectureBundle ↓ JS Runtime ↓ Bridge ↓ React ↓ Shadow Tree ↓ Yoga ↓ UIManager ↓ Native View ↓ 首屏New ArchitectureBundle ↓ JS Runtime ↓ JSI ↓ React ↓ Fabric / Shadow Tree ↓ Yoga ↓ Commit ↓ Native View ↓ 首屏其中一个很关键的面试点是“Bridge 初始化”不是新架构下最准确的表述JSI/Fabric/TurboModules 才是理解新架构启动与通信的关键。我也可以给你画一张“RN 启动全链路 Legacy/New Architecture 对比图”。