RN Bridge 原理（React Native Bridge）
React Native（RN）的核心思想是：
JavaScript 负责业务逻辑和 UI 描述，Native（iOS/Android）负责真正的 UI 渲染和系统能力调用，两者通过 Bridge 通信。
Bridge 就是连接 JS 世界 和 Native 世界 的通信桥梁。
1. RN 的整体架构
简单理解：
JavaScript Thread
|
|
RN Bridge
|
-------------------------
| |
Native Modules UI Manager
| |
Android/iOS APIs Native Views
例如：
你写：
<Button title="点击"/>
JS 并不会直接创建 Android Button。
流程：
React Component
|
↓
JS生成Virtual DOM
|
↓
Bridge发送UI指令
|
↓
Native创建View
|
↓
显示到屏幕
2. Bridge 到底传什么？
Bridge 传输的是：
JSON-like 数据
例如：
JS：
NativeModules.Camera.open()
实际上 Bridge 会转换成类似：
{
"module": "Camera",
"method": "open",
"args": []
}
Native 收到：
CameraModule
|
↓
open()
|
↓
调用系统Camera API
3. 三个核心角色
① JS Thread
运行：
- React代码
- Redux
- Hooks
- JavaScript逻辑
例如：
setState({
name:"Tom"
})
JS线程计算：
UI应该变成什么样？
② Bridge
负责：
JS → Native
例如：
Alert.alert(
"Hello"
)
发送：
JS
|
| "显示Alert"
↓
Bridge
|
↓
Native
Android：
AlertDialog.show()
iOS：
UIAlertController
Native → JS
例如：
用户点击按钮：
Native Button
|
↓
Bridge
|
↓
JS callback
JS：
onPress()
执行。
③ Native Modules
提供原生能力：
例如：
RN：
Camera.takePhoto()
Native:
Android:
CameraManager
iOS:
AVCaptureSession
4. 为什么叫 Bridge？
因为两个环境完全不同：
JS：
JavaScript VM
对象
垃圾回收
动态类型
Native：
Java/Kotlin
Objective-C/Swift
内存管理
系统API
它们不能直接调用。
所以需要：
JS对象
↓
序列化
↓
Bridge
↓
反序列化
↓
Native对象
5. Bridge 的异步机制
传统 RN Bridge：
异步通信
例如：
JS：
NativeModules.User.getUser()
不是：
JS等待返回
而是：
JS发送请求
继续执行
Native处理
结果回来
执行callback
类似：
JS Thread
sendMessage()
|
|
↓
Bridge Queue
|
↓
Native Queue
|
↓
callback
|
↓
JS Thread
6. 为什么旧 Bridge 性能不好？
因为：
问题1：JSON序列化
例如：
大量列表：
[
{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
架构：
JS
|
|
JSI
|
-----------------
| |
Fabric TurboModules
|
Native UI
8. JSI 和 Bridge区别
老架构
JS
↓ JSON
Bridge
↓ JSON
Native
新架构
JS
↓
C++ Interface (JSI)
↓
Native Object
直接调用。
类似：
以前：
打电话找人工转接
现在：
直接拨内部号码
9. Fabric是什么？
以前：
JS
|
Bridge
|
UI Manager
|
View
Fabric：
JS
|
JSI
|
C++ Renderer
|
Native View
优势：
- 更快
- 同步渲染
- 支持 Concurrent React
10. TurboModules是什么？
旧：
所有Native Module启动加载
例如：
你只用：
Camera
但是：
Bluetooth
Maps
Contacts
全部加载。
TurboModules：
按需加载：
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 更直接的通信，提高性能。
