React Native 的架构如何工作（bridge 与新架构）？

Question

Accepted Answer

React Native 运行 **JavaScript** 和 **native** 代码，它们必须通信。原始架构使用异步 **bridge**；**新架构**（JSI、TurboModules、Fabric）启用了更快的同步通信。理解这一点可以澄清 React Native 的行为和性能。

## 原始架构：bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## 新架构（JSI、TurboModules、Fabric）

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## 为什么这很重要（实践）

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## 为什么这很重要

理解 React Native 的架构是有价值的高级知识，因为它 **解释了 React Native 的行为和性能特征**，深化了推理和优化应用程序的能力。

基本结构——React Native 运行一个 **JS 线程**（你的代码）和 **native 端**（UI、native 模块）必须相互 **通信**——这是理解 React Native 如何工作的关键。

理解 **原始 bridge 架构**（JS 和 native 通过异步 bridge 进行通信，该 bridge 将消息序列化为 JSON 并在它们之间传递）解释了 React Native 的历史性能特征和限制：通信仅是异步的、有序列化开销，bridge 可能成为 **重流量的瓶颈**（导致快速滚动或动画传递数据时的卡顿）——这就是 **最小化 bridge 交叉并在 native 线程上运行动画是重要优化的原因**，将架构与实际性能建议联系起来。

理解 **新架构**（**JSI** 启用直接、同步的 JS↔native 调用，无需序列化 bridge；**TurboModules** 用于延迟加载 native 模块；**Fabric** 用于更好的渲染；Codegen 用于类型安全接口）变得越来越重要，因为它正在成为默认选项——它改进了性能、减少了开销、启用了同步调用，并产生了更流畅的 UI，代表了 React Native 的重大演进。

理解这种架构 **解释了 React Native 的性能**（为什么 bridge 很重要）、**指导优化**（遵循架构的实践）并澄清了 React Native 如何执行——将 React Native 从黑盒转变为可理解的系统。

Since understanding the architecture (the bridge and the new JSI-based architecture) explains React Native's performance characteristics, informs optimization, and reflects awareness of its important evolution, and since this depth elevates one from using React Native to understanding it, understanding React Native's architecture is valuable senior-level knowledge — explaining its behavior and performance, informing optimization, and reflecting the depth and awareness of platform evolution expected for senior React Native roles.