React Native桥接机制深度解析：JS与原生的通信管道

深入剖析React Native的桥接机制，理解JS线程与原生线程的通信原理，掌握Native Module开发与JSI优化策略

发表于 2026/04/08

作者 独行的风

12 分钟阅读

一句话概括

React Native桥接机制是连接JavaScript运行时与原生平台的核心通信管道，通过异步消息队列实现跨语言调用。

背景

在跨端开发领域，React Native通过”Learn Once, Write Anywhere”的理念让前端开发者能够构建原生应用。但JavaScript代码如何调用原生API？这背后的桥接机制是理解RN性能瓶颈和优化方向的关键。

早期的RN采用异步Bridge通信，RN 0.60+引入JSI（JavaScript Interface）逐步替代传统Bridge，RN新架构（Fabric、TurboModules）更是重构了整个通信层。

概念定义

核心术语

术语	定义
Bridge	JS与原生之间的异步消息队列通信层
Native Module	暴露给JS调用的原生功能模块（iOS用ObjC/Swift，Android用Java/Kotlin）
JSI	JavaScript Interface，提供JS引擎与原生代码的直接引用访问
JS Thread	运行React应用的JavaScript线程
Main Thread	原生UI线程，负责渲染和用户交互
Shadow Queue	处理布局计算的串行队列

架构分层

┌─────────────────────────────────────┐
│         JavaScript Layer            │
│  (React Components, JS Business)    │
└──────────────┬──────────────────────┘
               │ Bridge / JSI
┌──────────────┴──────────────────────┐
│          Bridge Layer               │
│   (MessageQueue, JSON Serialization)│
└──────────────┬──────────────────────┘
               │
┌──────────────┴──────────────────────┐
│         Native Layer                │
│  (iOS: ObjC/Swift, Android: Java)   │
└─────────────────────────────────────┘

最小示例

创建原生模块（iOS）

  
// RCT_EXPORT_MODULE 宏声明原生模块
RCT_EXPORT_MODULE(ToastModule)

// 暴露方法给JS调用
RCT_EXPORT_METHOD(showMessage:(NSString *)message
                  duration:(double)duration) {
  dispatch_async(dispatch_get_main_queue(), ^{
    // 原生UI操作必须在主线程
    UIAlertController *alert = [UIAlertController 
      alertControllerWithTitle:@"Toast"
      message:message
      preferredStyle:UIAlertControllerStyleAlert];
    // ...显示逻辑
  });
}

JavaScript端调用

  
import { NativeModules } from 'react-native';

const { ToastModule } = NativeModules;

// 直接调用原生方法
ToastModule.showMessage('Hello Native!', 2.0);

使用Promise返回结果

  
RCT_REMAP_METHOD(getDeviceInfo,
                 getDeviceInfoWithResolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject) {
  @try {
    NSDictionary *info = @{
      @"model": [[UIDevice currentDevice] model],
      @"system": [[UIDevice currentDevice] systemVersion]
    };
    resolve(info);
  } @catch (NSError *error) {
    reject(@"ERROR", @"获取设备信息失败", error);
  }
}

  
const deviceInfo = await ToastModule.getDeviceInfo();
console.log(deviceInfo.model); // iPhone14,2

核心知识点

1. Bridge通信流程

消息传递步骤：

JS调用 → MessageQueue入队 → Bridge传输 → 原生模块执行 → 回调结果 → Bridge回传 → JS接收

详细流程：

  
// JS侧 MessageQueue.js
const MODULE_IDS = 0;
const METHOD_IDS = 1;
const PARAMS = 2;

class MessageQueue {
  __callNative(moduleId, methodId, params) {
    // 序列化参数为JSON
    const serializedParams = JSON.stringify(params);
    
    // 调用原生Bridge
    global.__nativeCall(moduleId, methodId, serializedParams);
  }
}

2. 线程模型

线程	职责	注意事项
JS Thread	执行JS代码、React Diff	不要阻塞此线程
Main Thread	原生UI渲染、用户交互	Native Module UI操作必须切主线程
Shadow Queue	计算布局、Yoga引擎	串行执行避免竞态
Native Modules Queue	执行原生模块方法	自定义模块可指定线程

3. 数据序列化开销

传统Bridge使用JSON序列化：

  
// JS发送
{ type: 'navigate', route: 'Detail', params: { id: 123 } }

// Bridge传输（JSON字符串）
'{"type":"navigate","route":"Detail","params":{"id":123}}'

// 原生解析
NSDictionary *data = [NSJSONSerialization JSONObjectWithData:jsonData options:0 error:nil];

性能瓶颈：

大数据量时JSON序列化耗时可观
无法传递函数、Date等复杂类型
频繁调用导致Bridge拥塞

4. JSI（JavaScript Interface）

JSI直接提供JS引擎与原生对象的引用访问：

  
// C++ JSI实现示例
class ToastModuleJSI : public jsi::HostObject {
  jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& name) override {
    auto methodName = name.utf8(rt);
    
    if (methodName == "showMessage") {
      return jsi::Function::createFromHostFunction(
        rt, name, 1,
        [](jsi::Runtime& rt, const jsi::Value&, const jsi::Value* args, size_t count) {
          // 直接访问JS对象，无需JSON序列化
          std::string message = args[0].getString(rt).utf8(rt);
          // 调用原生实现...
          return jsi::Value::undefined();
        }
      );
    }
    return jsi::Value::undefined();
  }
};

JSI优势：

零拷贝数据传递
同步方法调用
支持复杂数据类型（函数、Promise等）

实战案例

案例1：高性能图片处理模块

需求： 大图压缩、裁剪，避免Bridge序列化瓶颈

  
// iOS Native Module
RCT_EXPORT_MODULE(ImageProcessor)

RCT_EXPORT_METHOD(compressImage:(NSString *)uri
                  options:(NSDictionary *)options
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    @autoreleasepool {
      NSURL *url = [NSURL URLWithString:uri];
      NSData *data = [NSData dataWithContentsOfURL:url];
      UIImage *image = [UIImage imageWithData:data];
      
      // 使用ImageIO进行高效压缩
      NSDictionary *compression = @{
        (__bridge id)kCGImageDestinationLossyCompressionQuality: @(0.8)
      };
      
      // 压缩逻辑...
      NSString *outputPath = [self saveCompressedImage:image];
      
      dispatch_async(dispatch_get_main_queue(), ^{
        resolve(@{@"uri": outputPath, @"size": @(fileSize)});
      });
    }
  });
}

案例2：事件订阅模式（原生主动通知JS）

  
// iOS: 发送事件到JS
#import <React/RCTEventEmitter.h>

@interface NetworkModule : RCTEventEmitter <NSURLSessionDelegate>
@end

@implementation NetworkModule

RCT_EXPORT_MODULE()

- (NSArray<NSString *> *)supportedEvents {
  return @[@"onNetworkStatusChange", @"onDownloadProgress"];
}

- (void)networkStatusChanged:(NSString *)status {
  [self sendEventWithName:@"onNetworkStatusChange" 
                     body:@{@"status": status, @"timestamp": @([[NSDate date] timeIntervalSince1970])}];
}

@end

  
// JS: 订阅原生事件
import { NativeEventEmitter, NativeModules } from 'react-native';

const { NetworkModule } = NativeModules;
const networkEmitter = new NativeEventEmitter(NetworkModule);

useEffect(() => {
  const subscription = networkEmitter.addListener(
    'onNetworkStatusChange',
    (event) => {
      console.log('Network changed:', event.status);
    }
  );
  
  return () => subscription.remove();
}, []);

案例3：TurboModule（新架构）

  
// NativeToast.ts (Codegen生成的TypeScript规范)
export interface Spec extends TurboModule {
  showMessage(message: string, duration: number): Promise<void>;
  getDeviceInfo(): Promise<DeviceInfo>;
}

export default TurboModuleRegistry.getEnforcing<Spec>('ToastModule');

  
// iOS: TurboModule实现
@interface ToastModule : NSObject <NativeToastSpec>
@end

@implementation ToastModule
RCT_EXPORT_MODULE()

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeToastSpecJSI>(params);
}

- (void)showMessage:(NSString *)message
           duration:(double)duration
            resolve:(RCTPromiseResolveBlock)resolve
             reject:(RCTPromiseRejectBlock)reject {
  // 直接调用，JSI优化
}
@end

底层原理

Bridge底层实现

iOS侧MessageQueue实现：

  
// RCTBridge.m
- (void)handleBuffer:(id)buffer {
  // 解析消息队列
  NSArray *requestsArray = [RCTConvert NSArray:buffer];
  
  for (NSDictionary *request in requestsArray) {
    NSNumber *moduleId = request[@"moduleID"];
    NSNumber *methodId = request[@"methodID"];
    NSArray *args = request[@"args"];
    
    RCTModuleData *moduleData = self.moduleData[moduleId];
    [moduleData invokeMethod:methodId withArguments:args];
  }
}

JS侧调用链路：

NativeModules.Module.method()
  ↓
MessageQueue.__callNative(moduleId, methodId, params)
  ↓
global.nativeFlushQueueImmediate(queue)  // C++注入的全局函数
  ↓
JSExecutor::flushQueue()  // JSC/Hermes引擎调用
  ↓
Bridge.executeJS()  // 跨线程通信
  ↓
RCTModuleData invokeMethod  // 原生执行

JSI内部机制

TurboModule初始化流程：

  
// TurboModuleManager.cpp
jsi::Value TurboModuleManager::get(jsi::Runtime& rt, const jsi::PropNameID& name) {
  std::string moduleName = name.utf8(rt);
  
  // 从原生侧获取TurboModule实例
  auto module = delegate_->getModule(moduleName);
  
  // 创建JSI HostObject包装
  auto hostObject = std::make_shared<TurboModuleJSI>(module);
  return jsi::Object::createFromHostObject(rt, hostObject);
}

直接调用路径（无Bridge）：

JS调用: turboModule.method(arg)
  ↓
JSI HostObject::get() 返回 jsi::Function
  ↓
Function直接调用C++实现
  ↓
原生代码执行（同线程同步调用）

新架构对比

特性	Old Architecture	New Architecture (Fabric + TurboModules)
通信方式	异步Bridge	JSI同步调用
数据传递	JSON序列化	直接引用
渲染	异步Shadow Tree	同步Shadow Tree
优先级	无优先级	优先级调度（Lane）
并发	单JS线程	多线程并发
类型安全	无	Codegen自动生成

高频面试题解析

Q1: RN Bridge为什么会影响性能？如何优化？

分析： Bridge本质是异步消息队列，每次跨语言调用都要：

JS参数JSON序列化
跨线程消息传递
原生JSON反序列化
结果回传重复上述过程

优化策略：

  
// ❌ 高频调用示例（Bridge拥塞）
setInterval(() => {
  NativeModule.updateProgress(progress);  // 每16ms一次
}, 16);

// ✅ 批量更新优化
let pendingUpdates = [];
setInterval(() => {
  pendingUpdates.push(progress);
  if (pendingUpdates.length >= 10) {
    NativeModule.batchUpdate(pendingUpdates);
    pendingUpdates = [];
  }
}, 16);

  
// ✅ 使用JSI同步调用（新架构）
- (void)updateProgressSync:(double)progress {
  __strong decltype(self) strongSelf = self;
  if (strongSelf) {
    [strongSelf.progressView setProgress:progress animated:NO];
  }
}

Q2: Native Module如何保证线程安全？

答案要点：

  
// ❌ 错误：UI操作不在主线程
RCT_EXPORT_METHOD(updateUI:(NSString *)text) {
  self.label.text = text;  // 可能崩溃！
}

// ✅ 正确：显式切换到主线程
RCT_EXPORT_METHOD(updateUI:(NSString *)text) {
  dispatch_async(dispatch_get_main_queue(), ^{
    self.label.text = text;
  });
}

// ✅ 使用methodQueue指定执行队列
- (dispatch_queue_t)methodQueue {
  return dispatch_queue_create("com.app.processing", DISPATCH_QUEUE_SERIAL);
}

Q3: TurboModule与传统Bridge的本质区别？

对比：

维度	Bridge	TurboModule
调用方式	异步Promise	同步直接调用
类型检查	运行时	编译时（Codegen）
数据传递	JSON拷贝	零拷贝引用
初始化	按需懒加载	预先注册
性能	O(n)序列化开销	O(1)直接访问

代码对比：

  
// Bridge：异步
const result = await NativeModule.calculate(data);  // 必须await

// TurboModule：同步
const result = TurboModule.calculate(data);  // 直接返回结果

总结扩展

核心要点

Bridge是RN跨端通信的基石，理解其异步消息队列机制有助于性能调优
线程安全至关重要，UI操作必须切主线程，耗时任务放后台队列
JSI是新架构的核心，提供零拷贝、同步调用的原生接口
TurboModule + Fabric 构成RN新架构，性能接近原生

扩展学习

官方文档：React Native New Architecture
源码阅读：ReactCommon/jsi/jsi/jsi.h、ReactCommon/turbomodule
进阶主题：Hermes引擎、Fabric渲染器、Codegen工具链

实践建议

升级到RN 0.70+启用新架构
使用Codegen定义Native Module接口
高频调用场景优先考虑JSI实现
监控Bridge调用频率，避免过度通信

桥接机制是跨端开发的”隐形桥梁”，理解它才能跨越性能与体验的鸿沟。

跨端开发, ReactNative

本文由作者按照 CC BY 4.0 进行授权