RN Bridge 原理 - 技术栈

RN Bridge 原理（React Native Bridge）

React Native（RN）的核心思想是：

JavaScript 负责业务逻辑和 UI 描述，Native（iOS/Android）负责真正的 UI 渲染和系统能力调用，两者通过 Bridge 通信。

Bridge 就是连接 JS 世界 和 Native 世界 的通信桥梁。

1. RN 的整体架构

简单理解：

yaml 复制代码

              JavaScript Thread
                    |
                    |
                RN Bridge
                    |
        -------------------------
        |                       |
 Native Modules           UI Manager
        |                       |
 Android/iOS APIs        Native Views

例如：

你写：

ini 复制代码

<Button title="点击"/>

JS 并不会直接创建 Android Button。

流程：

yaml 复制代码

React Component
        |
        ↓
JS生成Virtual DOM
        |
        ↓
Bridge发送UI指令
        |
        ↓
Native创建View
        |
        ↓
显示到屏幕

2. Bridge 到底传什么？

Bridge 传输的是：

JSON-like 数据

例如：

JS：

kotlin 复制代码

NativeModules.Camera.open()

实际上 Bridge 会转换成类似：

json 复制代码

{
  "module": "Camera",
  "method": "open",
  "args": []
}

Native 收到：

scss 复制代码

CameraModule
      |
      ↓
open()
      |
      ↓
调用系统Camera API

3. 三个核心角色

① JS Thread

运行：

React代码
Redux
Hooks
JavaScript逻辑

例如：

css 复制代码

setState({
  name:"Tom"
})

JS线程计算：

UI应该变成什么样？

② Bridge

负责：

JS → Native

例如：

arduino 复制代码

Alert.alert(
 "Hello"
)

发送：

arduino 复制代码

JS
 |
 |  "显示Alert"
 ↓
Bridge
 |
 ↓
Native

Android：

scss 复制代码

AlertDialog.show()

iOS：

objectivec 复制代码

UIAlertController

Native → JS

例如：

用户点击按钮：

yaml 复制代码

Native Button
      |
      ↓
Bridge
      |
      ↓
JS callback

JS：

scss 复制代码

onPress()

执行。

③ Native Modules

提供原生能力：

例如：

RN：

scss 复制代码

Camera.takePhoto()

Native:

Android:

复制代码

CameraManager

iOS:

objectivec 复制代码

AVCaptureSession

4. 为什么叫 Bridge？

因为两个环境完全不同：

JS：

复制代码

JavaScript VM
对象
垃圾回收
动态类型

Native：

复制代码

Java/Kotlin
Objective-C/Swift
内存管理
系统API

它们不能直接调用。

所以需要：

arduino 复制代码

JS对象
 ↓
序列化
 ↓
Bridge
 ↓
反序列化
 ↓
Native对象

5. Bridge 的异步机制

传统 RN Bridge：

异步通信

例如：

JS：

scss 复制代码

NativeModules.User.getUser()

不是：

复制代码

JS等待返回

而是：

复制代码

JS发送请求

继续执行

Native处理

结果回来

执行callback

类似：

markdown 复制代码

JS Thread

sendMessage()
      |
      |
      ↓

Bridge Queue

      |
      ↓

Native Queue

      |
      ↓

callback

      |
      ↓

JS Thread

6. 为什么旧 Bridge 性能不好？

因为：

问题1：JSON序列化

例如：

大量列表：

bash 复制代码

[
 {id:1},
 {id:2},
 ...
10000条
]

需要：

JS对象

↓

JSON转换

↓

Native对象

成本高。

问题2：线程切换

例如动画：

60 FPS

意味着：

复制代码

16.6ms一帧

如果：

JS Thread

↓

Bridge

↓

Native

频繁通信：

容易掉帧。

问题3：异步限制

例如：

JS：

复制代码

我要马上知道Native结果

Bridge：

复制代码

等消息回来

存在延迟。

7. 新架构为什么取消 Bridge？

React Native New Architecture：

核心：

JSI
Fabric
TurboModules

架构：

yaml 复制代码

          JS
          |
          |
         JSI
          |
 -----------------
 |               |
Fabric       TurboModules
 |
Native UI

8. JSI 和 Bridge区别

老架构

javascript 复制代码

JS

↓ JSON

Bridge

↓ JSON

Native

新架构

vbnet 复制代码

JS

↓

C++ Interface (JSI)

↓

Native Object

直接调用。

类似：

以前：

打电话找人工转接

现在：

直接拨内部号码

9. Fabric是什么？

以前：

arduino 复制代码

JS
 |
Bridge
 |
UI Manager
 |
View

Fabric：

sql 复制代码

JS
 |
JSI
 |
C++ Renderer
 |
Native View

优势：

更快
同步渲染
支持 Concurrent React

10. TurboModules是什么？

旧：

sql 复制代码

所有Native Module启动加载

例如：

你只用：

复制代码

Camera

但是：

复制代码

Bluetooth
Maps
Contacts

全部加载。

TurboModules：

按需加载：

sql 复制代码

Camera需要？

加载Camera Module

面试回答版本（1分钟）

如果面试问：

RN Bridge 原理是什么？

可以回答：

React Native Bridge 是连接 JavaScript 和 Native 的通信机制。JS 层通过 Bridge 将调用信息序列化成 JSON 消息发送给 Native，Native 根据模块和方法执行对应逻辑，再通过 Bridge 将结果异步回传给 JS。传统 Bridge 存在序列化、线程切换和异步通信开销，因此 React Native 新架构使用 JSI、Fabric 和 TurboModules，实现 JS 与 Native 更直接的通信，提高性能。