RN 架构：JS层、原生桥接层、原生渲染层 通信原理

React NativeRN的经典架构可以理解为三层架构┌──────────────────────────────┐ │ JS Layer │ │ React JavaScript │ └──────────────┬───────────────┘ │ Bridge桥接层 │ ┌──────────────┴───────────────┐ │ Native Layer │ │ Android(Java/Kotlin) │ │ iOS(Objective-C/Swift) │ └──────────────────────────────┘如果是新版 RNFabric JSIBridge 已经逐渐被 JSI 替代但面试中一般都会先讲经典 Bridge再讲新架构。一、JS层JavaScript LayerJS 层就是 React 代码运行的地方。负责React组件业务逻辑状态管理Redux、Mobx网络请求页面跳转调用 Native API例如function App() { return ( View TextHello RN/Text /View ); }React 会先生成 Virtual DOM。RN 并不会生成 HTML。而是生成React Element ↓ Shadow Tree ↓ 告诉 Native 创建一个 Text 创建一个 View 设置宽高 设置背景颜色所以JS 不负责真正画界面。二、Bridge桥接层Bridge 是 RN 最核心的一层。它负责JS ←→ Native 通信。因为JavaScript不能直接调用Java或者Objective-C。所以需要一个翻译官。例如JSAlert.alert(Hello);不能直接执行。Bridge 会变成AndroidJS ↓ Bridge ↓ Java ↓ AlertDialog.show()iOSJS ↓ Bridge ↓ OC ↓ UIAlertControllerBridge 就像 RPC。Bridge 的通信方式RN 采用JSON Message Queue消息队列JS 发消息[ moduleId, methodId, params ]例如[ 5, 2, [hello] ]表示Module AlertModule Method show() 参数 helloBridge 收到以后找到对应 Native Module↓调用 Native 方法↓执行。三、Native 层原生层Native 层真正负责AndroidTextView Button RecyclerView CanvasiOSUILabel UIButton UITableViewRN 并没有自己画 UI。而是React↓Bridge↓真正创建Android ViewiOS View所以 RN 的 UI 是真正原生控件。RN 通信全过程假设Button title登录 onPress{login} /点击按钮。整个流程Native Button ↓ 点击事件 ↓ Bridge ↓ JS ↓ login() ↓ axios() ↓ 拿到数据 ↓ setState() ↓ React Diff ↓ Bridge ↓ 更新 Native View完整流程Native ↓ Bridge ↓ JS ↓ React ↓ Bridge ↓ NativeBridge 两边都能通信。RN 更新 UI 原理例如Text{count}/Text第一次count 0ReactText0/TextBridgeCreate Text text0NativeUILabel text 0后来setCount(1)React发现0 ↓ 1Diff只更新textBridge发送UpdateText id3 text1NativeUILabel.setText(1)不会整个页面重建。JS 调 Native例如调用摄像头NativeModules.Camera.open()流程JS ↓ Bridge ↓ CameraModule ↓ Java ↓ Camera API执行完成Java ↓ Bridge ↓ Promise Resolve ↓ JSJSconst result await Camera.open();Native 调 JS例如扫码完成。AndroidCamera ↓ 识别二维码 ↓ Native Module ↓ Bridge ↓ emit()JSDeviceEventEmitter.addListener( scanSuccess, (data){ console.log(data) } )流程Native ↓ Bridge ↓ JS Event ↓ 回调为什么 Bridge 慢Bridge 最大问题序列化Serialization例如JS{ name:Tom, age:18 }发送给 Native需要Object ↓ JSON ↓ Bridge ↓ JSON ↓ Java Object反过来也一样。所以每次通信都有序列化反序列化拷贝如果60fps每一帧Bridge ↓ 几千条消息Bridge 就容易成为性能瓶颈。尤其大列表高频动画手势图表视频都会卡顿。新架构JSIReact Native 0.68 开始逐步采用新架构JS │ JSIC │ ┌───────┴────────┐ │ │ Fabric TurboModules │ │ Native UI Native Module与 Bridge 相比无需 JSON 序列化JS 可通过 JSI 直接访问 C 层对象。支持同步调用不再局限于异步消息队列。通信开销更低减少跨语言拷贝。更适合高频场景如动画、手势、复杂渲染等。面试回答模板可以按下面的思路概括React Native 经典架构由JS 层、Bridge桥接层和 Native 层组成。JS 层负责 React 组件和业务逻辑Native 层负责真正创建和渲染 Android/iOS 原生控件Bridge 作为两者之间的通信通道通过消息队列传递模块、方法和参数实现 JS 调用原生能力以及原生回调 JS。由于 Bridge 需要进行数据序列化和反序列化并且通信主要是异步的因此在高频交互场景下容易成为性能瓶颈。为了解决这一问题新架构引入了 JSI、Fabric 和 TurboModules使 JS 能够更高效地与原生交互降低通信成本并提升渲染性能。这套回答既覆盖了经典 Bridge 架构又点出了新架构的改进方向是 React Native 面试中比较完整且常见的答法。