自从Facebook提出了react之后，这个框架的关注度一直居高不下，它所引入的一些东西还是值得学习，比如组件化的开发方式，virtual dom的性能提升方式等，最近为了改进现有的跨平台方案也在研究react，在这边也做下相关的记录。

pre

在开始使用react之前我们需要搭建相应的环境，这个就不在探讨了，具体可以查看官方文档，由于react需要使用javascript语言，所以可能需要去简单了解一下相关的语法(比如：ES6 标准入门)，另外iOS在7.0之后引入了javascriptcore框架，极大的方便了js跟oc之间de通信，之前有一篇博客简单的介绍了javascriptcore，有兴趣的也可以去了解一下。

整体框架

react的整体示意图可以用下面图表示，我们所编写的js代码可以在各个平台上运行，这让我们有web的开发效率的同时又有了原生应用的体验。

Learn once, write anywhere

不过这里面包含的东西对于有点多，尤其很多web相关的东西对于没接触过的人还是有些难度的，要想快速的研究透彻可能不太现实，至少对于我是这样的，因此我们首先研究一下react中js跟native之间的通信方法，其它的有待后面在分析。
假设你已经搭建好相关环境，通过下面的命令创建一个新工程：

react-native init TestDemo

运行xcodeproj工程，Xcode在编译完后会执行打包脚本，将js文件都打包到一个main.jsbundle文件里，我们可以选择将该文件放到服务器上或者应用内部，如果放到服务器上需要先下载该文件，接着加载执行该文件可以看到demo页面了。

packager

demo

通信过程

所谓的通信其实就是js和oc两者如何相互调用传参等，为了更方便的揭示两者的通信过程，我们可以设置messagequeue.js文件中的SPY_MODE标志为true：

//MessageQueue.js，需要处于dev模式
//http://localhost:8081/index.ios.bundle?platform=ios&dev=true为true
let SPY_MODE = true; //

现在重新reload js你就可以看到如下的日志输出，下面的日志可以比较直观的揭示两者的调用方式，'JS->N'即JS调用native代码，反之亦然。可以看到程序一开始native会调用js的RCTDeviceEventEmitter.emit方法，分别发送'appStateDidChange' 和'networkStatusDidChange'两个事件，接着调用js的AppRegistry.runApplication方法启动js应用，然后js层就可以通过native提供的方法来 RCTUIManager.createView来创建视图了。

N->JS : RCTDeviceEventEmitter.emit(["appStateDidChange",{"app_state":"active"}])
N->JS : RCTDeviceEventEmitter.emit(["networkStatusDidChange",{"network_info":"wifi"}])
N->JS : AppRegistry.runApplication(["TestDemo",{"rootTag":1,"initialProps":{}}])
Running application "TestDemo" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
JS->N : RCTUIManager.createView([2,"RCTView",1,{"flex":1}])
JS->N : RCTUIManager.createView([3,"RCTView",1,{"flex":1}])
JS->N : RCTUIManager.createView([4,"RCTView",1,{"flex":1,"justifyContent":"center","alignItems":"center","backgroundColor":4294311167}])
S->N : RCTUIManager.createView([5,"RCTText",1,{"fontSize":20,"textAlign":"center","margin":10,"accessible":true,"allowFontScaling":true}])
JS->N : RCTUIManager.createView([6,"RCTRawText",1,{"text":"Welcome to React Native!"}])
JS->N : RCTUIManager.setChildren([5,[6]])

JS->Native，JS调用Native

让我们先来看看native如何创建一个模块然后暴露给js层调用的，具体的可以参考官方文档，我们这里举个简单的🌰，创建一个MyModule模块：

@interface MyModule : NSObject <RCTBridgeModule>
@end

@implementation MyModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
  RCTLogInfo(@"add an event %@ at %@", name, location);
}

我们先来看看这上面的两个宏定义：

• RCT_EXPORT_MODULE()
  在native层创建的模块需要通过这个宏定义将该模块暴露给js，该宏定义的具体实现也很简单，如下：

#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }

首先它将RCTRegisterModule这个函数定义为extern，这样该函数的实现对编译器不可见，但会在链接的时候可以获取到；同时声明一个moduleName函数，该函数返回该模块的js名称，如果你没有指定，默认使用类名；最后声明一个load函数（当应用载入后会加载所有的类，load函数在类初始化加载的时候就调用），然后调用RCTRegisterModule函数注册该模块，该模块会被注册添加到一个全局的数组RCTModuleClasses中。

• RCT_EXPORT_METHOD()
  要暴露给js调用的API接口需要通过该宏定义声明，该宏定义会额外创建一个函数，形式如下：

+ (NSArray *)__rct_export__230
{
  return @[ @"", @"addEvent:(NSString *)name location:(NSString *)location" ];
}

该函数名称以 rct_export 开头，同时加上该函数所在的代码行数，该函数返回一个包含可选的js名称以及一个函数签名的数组，他们的作用后面会说到。

• RCTBatchedBridge
  为了桥接js跟native，native层引入了RCTBridge这个类负责双方的通信，不过真正起作用的是RCTBatchedBridge这个类，这个类应该算是比较重要的一个类了，让我们来看看这个类主要做啥事情：

//RCTBatchedBridge.m
- (void)start
{
  dispatch_queue_t bridgeQueue = dispatch_queue_create("com.facebook.react.RCTBridgeQueue", DISPATCH_QUEUE_CONCURRENT);

  // 异步的加载打包完成的js文件，也就是main.jsbundle，如果包文件在本地则直接加载，否则根据URL通过NSURLSession方式去下载
  [self loadSource:^(NSError *error, NSData *source) {}];

  // 同步初始化需要暴露给给js层的native模块
  [self initModules];

  //异步初始化JS Executor，也就是js引擎
  dispatch_group_async(setupJSExecutorAndModuleConfig, bridgeQueue, ^{
    [weakSelf setUpExecutor];
  });

  //异步获取各个模块的配置信息
  dispatch_group_async(setupJSExecutorAndModuleConfig, bridgeQueue, ^{
    config = [weakSelf moduleConfig];
  });

  //获取各模块的配置信息后，将这些信息注入到JS环境中
  [self injectJSONConfiguration:config onComplete:^(NSError *error) {}];

  //开始执行main.jsbundle
  [self executeSourceCode:sourceCode];
}

简单解释一下其中几个步骤的具体内容：

initModules

- (void)initModules
{
  NSMutableArray<RCTModuleData *> *moduleDataByID = [NSMutableArray new];
  NSMutableDictionary<NSString *, RCTModuleData *> *moduleDataByName = [NSMutableDictionary new];
  SEL setBridgeSelector = NSSelectorFromString(@"setBridge:");
  IMP objectInitMethod = [NSObject instanceMethodForSelector:@selector(init)];

  //RCTGetModuleClasses()返回之前提到的全局RCTModuleClasses数组，也就是模块类load时候会注册添加的数组
  for (Class moduleClass in RCTGetModuleClasses()) {
    NSString *moduleName = RCTBridgeModuleNameForClass(moduleClass);
    //如果该类或者父类没有重写了init方法或实现了setBridge方法，则，创建一个类的实例
    //React认为开发者期望这个模块在bridge第一次初始化时会实例化，确保该模块只有一个实例对象
    if ([moduleClass instanceMethodForSelector:@selector(init)] != objectInitMethod ||
        [moduleClass instancesRespondToSelector:setBridgeSelector]) {
      module = [moduleClass new];
    }

    //创建RCTModuleData模块信息，并保存到数组中
    RCTModuleData *moduleData;
    if (module) {
      if (module != (id)kCFNull) {
        moduleData = [[RCTModuleData alloc] initWithModuleInstance:module
                                                            bridge:self];
      }
    } 
    moduleDataByName[moduleName] = moduleData;
    [moduleDataByID addObject:moduleData];
  }
}

当创建完模块的实例对象之后，会将该实例保存到一个RCTModuleData对象中，RCTModuleData里包含模块的类名，名称，方法列表，实例对象、该模块代码执行的队列以及配置信息等，js层就是根据这个对象来查询该模块的相关信息。

setUpExecutor

reactnative的js引擎在初始化的时候会创建一个新的线程，该线程的优先级跟主线层的优先级一样，同时创建一个runloop，这样线程才能循环执行不会退出。所以执行js代码不会影响到主线程，而且RCTJSCExecutor使用的是JavaScriptCore框架，所以react只支持iOS7及以上的版本。

//RCTJSCExecutor.m
- (instancetype)init
{
  NSThread *javaScriptThread = [[NSThread alloc] initWithTarget:[self class]
                                                       selector:@selector(runRunLoopThread)
                                                         object:nil];
  javaScriptThread.name = @"com.facebook.React.JavaScript";
  //设置该线程的优先级处于高优先级
  if ([javaScriptThread respondsToSelector:@selector(setQualityOfService:)]) {
    [javaScriptThread setQualityOfService:NSOperationQualityOfServiceUserInteractive];
  } else {
    javaScriptThread.threadPriority = [NSThread mainThread].threadPriority;
  }
  [javaScriptThread start];
  return [self initWithJavaScriptThread:javaScriptThread context:nil];
}
- (void)addSynchronousHookWithName:(NSString *)name usingBlock:(id)block
{
  __weak RCTJSCExecutor *weakSelf = self;
  [self executeBlockOnJavaScriptQueue:^{
    //将该block函数添加到js的context中，javascriptcore会将block函数转成js function
    weakSelf.context.context[name] = block;
  }];
}

- (void)setUp
{
  [self addSynchronousHookWithName:@"noop" usingBlock:^{}];
  [self addSynchronousHookWithName:@"nativeRequireModuleConfig" usingBlock:^NSString *(NSString *moduleName) {
    //获取该模块的具体配置信息，包含方法以及导出的常量等信息
    NSArray *config = [strongSelf->_bridge configForModuleName:moduleName];
    NSString *result = config ? RCTJSONStringify(config, NULL) : nil;
    return result;
  }];
  [self addSynchronousHookWithName:@"nativeFlushQueueImmediate" usingBlock:^(NSArray<NSArray *> *calls){
    [strongSelf->_bridge handleBuffer:calls batchEnded:NO];
  }];
}

可以看到setup的时候会注册几个方法到js的上下文中供后面js调用，比如'nativeFlushQueueImmediate' 和 'nativeRequireModuleConfig'方法等，当js调用相应方法时会执行对应的block，javascriptcore框架会负责js function和block的转换。

moduleConfig

- (NSString *)moduleConfig
{
  NSMutableArray<NSArray *> *config = [NSMutableArray new];
  for (RCTModuleData *moduleData in _moduleDataByID) {
    [config addObject:@[moduleData.name]]; 
  }
  return RCTJSONStringify(@{
    @"remoteModuleConfig": config,
  }, NULL);
}

从实现可以看出仅仅该过程是将模块的名称保存到一个数组中，然后生成一个json字符串的配置信息，包含所有的模块名称，类似如下：

{"remoteModuleConfig":[["MyModule"],["RCTStatusBarManager"],["RCTSourceCode"],["RCTAlertManager"],["RCTExceptionsManager"],...]}

injectJSONConfiguration

- (void)injectJSONConfiguration:(NSString *)configJSON
                     onComplete:(void (^)(NSError *))onComplete
{
  [_javaScriptExecutor injectJSONText:configJSON
                  asGlobalObjectNamed:@"__fbBatchedBridgeConfig"
                             callback:onComplete];
}

当我们生成配置信息之后，通过上面的函数将该json信息保存到js的全局对象__fbBatchedBridgeConfig中，这样js层就可以知道我们提供了哪些模块，不过细心的话你可能会发现给js的信息只有这些模块的名称，那js怎么调用native的方法的，其实这是react为了懒加载而采用的方式，具体我们下面说明。

当我们配置好native模块后，js层要想调用该native模块的方法如下示例：

var myModule = require('react-native').NativeModules.MyModule;
myModule.addEvent('Birthday Party', '4 Privet Drive, Surrey');

可以看出native模块是保存在NativeModules中，所以让我们到NativeModules.js文件中看看:

const BatchedBridge = require('BatchedBridge');
const RemoteModules = BatchedBridge.RemoteModules;
const NativeModules = {};
Object.keys(RemoteModules).forEach((moduleName) => {
  Object.defineProperty(NativeModules, moduleName, {
    enumerable: true,
    //懒加载方式
    get: () => {
      let module = RemoteModules[moduleName];
      if (module && typeof module.moduleID === 'number' && global.nativeRequireModuleConfig) {

        //从native层获取该模块的具体配置信息，nativeRequireModuleConfig是之前注册到js global对象的方法，然后把config信息交给BatchedBridge处理
        const json = global.nativeRequireModuleConfig(moduleName);
        const config = json && JSON.parse(json);
        module = config && BatchedBridge.processModuleConfig(config, module.moduleID);
        RemoteModules[moduleName] = module;
      }
      return module;
    },
  });
});

从上面的代码可以看出，假如你在js层没有使用到native模块，那么这些模块是不会加载到js层的，只有使用到了该模块，react才会去获取该模块的具体配置信息然后加载到js,这是react懒加载的一个方式，让我们能够节约内存,让我们看看如何获取模块的配置信息：

//只会导出有__rct_export__前缀的方法，也就是之前RCT_EXPORT_METHOD这个宏定义提到的
- (NSArray<id<RCTBridgeMethod>> *)methods
{
  //拷贝该类的所有方法，然后过滤以__rct_export__开头的方法
  Method *methods = class_copyMethodList(object_getClass(_moduleClass), &methodCount);
  for (unsigned int i = 0; i < methodCount; i++) {
    Method method = methods[i];
    SEL selector = method_getName(method);
    if ([NSStringFromSelector(selector) hasPrefix:@"__rct_export__"]) {
      IMP imp = method_getImplementation(method);
      NSArray<NSString *> *entries =
        ((NSArray<NSString *> *(*)(id, SEL))imp)(_moduleClass, selector);

      [moduleMethods addObject:/*代表该方法的对象*/];
    }
}

//获取模块的具体配置信息，以数组形式返回，第一个为模块名称，第二个为需要导出的常量（如果有），第三个为导出的方法（如果有）
//以MyModule为例，导出的config为：["MyModule",{"FirstDay":"Monday"},["addEvent","findEvents"]]
- (NSArray *)config
{
  //过滤获取以__rct_export__开头的方法
  for (id<RCTBridgeMethod> method in self.methods) {
    [methods addObject:method.JSMethodName];
  }
  NSMutableArray *config = [NSMutableArray new];
  [config addObject:self.name];
  if (constants.count) {
    [config addObject:constants];
  }
  if (methods) {
    [config addObject:methods];
  }
  return config;
}

导出的配置信息如下所示，可以看到config里包含的模块名称，导出的常量以及导出的函数等，推荐通过调试工具React Developer Tools打断点来查看：

__fbBatchedBridgeConfig

• BatchedBridge

上面我们说过获取到模块的具体配置信息之后会交给BatchedBridge处理，之前我们说的是native的bridge，不过js为了桥接native层也引入了BatchedBridge：

//BatchedBridge.js
const MessageQueue = require('MessageQueue');
const BatchedBridge = new MessageQueue(
  __fbBatchedBridgeConfig.remoteModuleConfig,
  __fbBatchedBridgeConfig.localModulesConfig,
);
//将BatchedBridge添加到js的全局global对象中，
Object.defineProperty(global, '__fbBatchedBridge', { value: BatchedBridge });
module.exports = BatchedBridge;

我们看到BatchedBridge是MessageQueue的一个实例，而且是全局唯一的一个实例，作为桥接native的一个关键点，我们来具体深入看一下它的内部实现“。

看一下传递给messageQueue的两个参数

  __fbBatchedBridgeConfig.remoteModuleConfig,
  __fbBatchedBridgeConfig.localModulesConfig,

__fbBatchedBridgeConfig我们之前提到过，是一个全局的js变量，__fbBatchedBridgeConfig.remoteModuleConfig就是之前我们在native层导出的模块配置表.

messageQueue

首先看一下messageQueue里的一些实例变量以及API

//存储native提供的各个模块信息，
this.RemoteModules = {};
//存储js提供的各个模块信息
this._callableModules = {};
//用于存放调用信息队列，有三个数组，分别对应调用的模块，调用的函数和参数信息，也就是一个函数调用由这三个数组拼接而成
this._queue = [[], [], [], 0];
//以moduleID为key，value为moduleName，针对js提供的module
this._moduleTable = {};
//以moduleId为key，value为模块导出的方法，针对js提供的module
this._methodTable = {};
//回调函数数组
this._callbacks = [];
//回调函数对应的索引id
this._callbackID = 0;

let modulesConfig = this._genModulesConfig(remoteModules);
this._genModules(modulesConfig);
localModules && this._genLookupTables(
  this._genModulesConfig(localModules),this._moduleTable, this._methodTable
);

//以moduleId为key，value为moduleName，针对native提供的module
this._remoteModuleTable = {};
//以moduleId为key，value为模块导出的方法，针对native提供module
this._remoteMethodTable = {};

可以看到这个队列里保存着js跟native的模块交互的所有信息。先看一下_genModules方法，该方法会根据config解析每个模块的信息并保存到this.RemoteModules中：

_genModules(remoteModules) {
  remoteModules.forEach((config, moduleID) => {
    this._genModule(config, moduleID);
  });
}

_genModules会历遍所有的remoteModules,根据每个模块的配置信息(如何生成配置信息下面会提到)和module索引ID来创建每个模块

_genModule(config, moduleID) {
  let moduleName, constants, methods, asyncMethods;
  //通过解构赋值的方式提取配置信息中的模块名称，常量(如果有)，方法名等
  [moduleName, constants, methods, asyncMethods] = config;
  let module = {};
  methods && methods.forEach((methodName, methodID) => {
    //历遍该config中的方法列表，根据配置信息为每个模块生成js function方法并添加到module对象，
    module[methodName] = this._genMethod(moduleID, methodID, methodType);
  });
  //常量信息assign到该module对象,并将module保存到this.RemoteModules中
  Object.assign(module, constants);
  this.RemoteModules[moduleName] = module;
  return module;
}

_genMethod方法如下，假如方法的type为remoteAsync，也就是异步方法，其实就是用一个promise对象(promise是js中的一种异步编程方式)来包装普通的方法，这里我们只看下普通方法的处理过程：

  _genMethod(module, method, type) {
    let fn = null;
    let self = this;
    fn = function(...args) {
    let lastArg = args.length > 0 ? args[args.length - 1] : null;
    let secondLastArg = args.length > 1 ? args[args.length - 2] : null;
    let hasSuccCB = typeof lastArg === 'function';
    let hasErrorCB = typeof secondLastArg === 'function';
    hasErrorCB && invariant(
      hasSuccCB,
      'Cannot have a non-function arg after a function arg.'
    );
    let numCBs = hasSuccCB + hasErrorCB;
    let onSucc = hasSuccCB ? lastArg : null;
    let onFail = hasErrorCB ? secondLastArg : null;
    args = args.slice(0, args.length - numCBs);
    return self.__nativeCall(module, method, args, onFail, onSucc);
      };
    }
    fn.type = type;
    return fn;
  }

可以看到该方法也比较简单，只是在参数列表中提取onFail和onSucc回调函数，并最终调用__nativeCall方法。

  __nativeCall(module, method, params, onFail, onSucc) {
    if (onFail || onSucc) {
      onFail && params.push(this._callbackID);
      this._callbacks[this._callbackID++] = onFail;
      onSucc && params.push(this._callbackID);
      this._callbacks[this._callbackID++] = onSucc;
    }

    this._queue[MODULE_IDS].push(module);
    this._queue[METHOD_IDS].push(method);
    this._queue[PARAMS].push(params);

    var now = new Date().getTime();
    //当两次调用间隔过小的时候只是先缓存调用信息
    if (global.nativeFlushQueueImmediate &&
        now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS) {
      global.nativeFlushQueueImmediate(this._queue);
      this._queue = [[], [], [], this._callID];
      this._lastFlush = now;
    }
  }
//RCTJSCExecutor.m
  [self addSynchronousHookWithName:@"nativeFlushQueueImmediate" usingBlock:^(NSArray<NSArray *> *calls){
    [strongSelf->_bridge handleBuffer:calls batchEnded:NO];
  }];

__nativeCall方法中，假如有回调参数onFail或onSucc，会将对应的callbackID保存到参数中，并将它们压入到_callbacks栈中；接着将模块，名称以及参数分别保存到_queue的三个数组中；接下来的关键就是调用nativeFlushQueueImmediate方法，该方法是之前RCTJSCExecutor setup的时候注册到js global的方法，因此它会执行相应的native block方法(javascriptcore框架会负责js function和block的转换)，可以看出_queue中的模块、方法以及参数信息最终会传递给native层，由native解析并执行相应的native方法。
我们也可以注意到这里react为了性能的优化，当js两次调用方法的间隔小于MIN_TIME_BETWEEN_FLUSHES_MS(5ms)时间，会将调用信息先缓存到_queue中，等待下次在一并提交给native层执行，可能这也就是这些参数设置成数组形式保存的原因。

让我们在接下去看看handleBuffer，handleBuffer会将调用信息先按模块的队列分好，

//RCTBatchedBridge.m
- (void)handleBuffer:(id)buffer batchEnded:(BOOL)batchEnded
{
  NSArray *requestsArray = [RCTConvert NSArray:buffer];
  //先将messageueue传递的参数提取出来分别放到moduleIDs、methodIDs和paramsArrays数组中，
  NSArray<NSNumber *> *moduleIDs = [RCTConvert NSNumberArray:requestsArray[RCTBridgeFieldRequestModuleIDs]];
  NSArray<NSNumber *> *methodIDs = [RCTConvert NSNumberArray:requestsArray[RCTBridgeFieldMethodIDs]];
  NSArray<NSArray *> *paramsArrays = [RCTConvert NSArrayArray:requestsArray[RCTBridgeFieldParamss]];

  //将调用的信息先安模块各自指定的队列分好
  NSMapTable *buckets = [[NSMapTable alloc] initWithKeyOptions:NSPointerFunctionsStrongMemory
                                                  valueOptions:NSPointerFunctionsStrongMemory
                                                      capacity:_moduleDataByName.count];
  [moduleIDs enumerateObjectsUsingBlock:^(NSNumber *moduleID, NSUInteger i, __unused BOOL *stop) {
    RCTModuleData *moduleData = _moduleDataByID[moduleID.integerValue];
    dispatch_queue_t queue = moduleData.methodQueue;
    if (!set) {
      set = [NSMutableOrderedSet new];
      [buckets setObject:set forKey:moduleData.methodQueue];
    }
    [set addObject:@(i)];
  }];
  //按队列来批量执行相应的调用
  for (dispatch_queue_t queue in buckets) {
    dispatch_block_t block = ^{
      RCTProfileEndFlowEvent();
      NSOrderedSet *calls = [buckets objectForKey:queue];
      @autoreleasepool {
        for (NSNumber *indexObj in calls) {
          NSUInteger index = indexObj.unsignedIntegerValue;
          //在各自模块上根据参数执行指定的方法
          [self _handleRequestNumber:index
                            moduleID:[moduleIDs[index] integerValue]
                            methodID:[methodIDs[index] integerValue]
                              params:paramsArrays[index]];
        }
      }
    };
    if (queue == RCTJSThread) {
      [_javaScriptExecutor executeBlockOnJavaScriptQueue:block];
    } else if (queue) {
      dispatch_async(queue, block);
    }
  }
}

_handleRequestNumber根据模块的ID、方法ID以及参数来调用具体的函数：

- (BOOL)_handleRequestNumber:(NSUInteger)i
                    moduleID:(NSUInteger)moduleID
                    methodID:(NSUInteger)methodID
                      params:(NSArray *)params
{
  RCTModuleData *moduleData = _moduleDataByID[moduleID];
  id<RCTBridgeMethod> method = moduleData.methods[methodID];
  [method invokeWithBridge:self module:moduleData.instance arguments:params];
}

其中如何根据函数签名来调用函数可以具体查阅-(void)processMethodSignature函数，这里就不去细谈了。

• 回调函数
  当有回调函数的时候，之前看到__nativeCall会将callbackID放置在参数中，对应的回调函数插入到_callbacks中保存，js将该ID传递给native，native就是通过该ID来找到对应的回调函数的。

//MyModule.m
RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback)
{
  NSArray *events = @[@"test1",@"test2",@"test3"];
  callback(@[[NSNull null], events]);
}
//生成的函数签名
findEvents:(RCTResponseSenderBlock)callback

比如MyModule定义的回调函数，当通过函数签名如果发现参数的类型是RCTResponseSenderBlock，则js传递过来的参数就是回调函数的ID，native层就会根据该ID以及RCTResponseSenderBlock提供的参数来回调相应的js回调函数，整个调用过程可以简单的用下图表示。

调用过程

Native->JS，Native调用JS

假如你有自己创建的js模块想要被native层调用，也需要将该js模块注册添加到messagequeue的_callableModules中，比如reactjs的事件发送模块：

//RCTEventEmitter.js
BatchedBridge.registerCallableModule(
  'RCTEventEmitter',
  ReactNativeEventEmitter
);

注册js模块

native层调用的js方法类似如下：

  [_bridge enqueueJSCall:@"RCTEventEmitter.receiveEvent"
                    args:body ? @[body[@"target"], name, body] : @[body[@"target"], name]];

不过让我们来看看真正执行js代码的地方，里面其实就是用到javascriptcore框架，为了方便断点调试我把宏去掉了，不过不影响，简单示例如下：

- (void)_executeJSCall:(NSString *)method
             arguments:(NSArray *)arguments
              callback:(RCTJavaScriptCallback)onComplete
{
  dispatch_block_t myBlock = ^{
    JSGlobalContextRef contextJSRef = JSContextGetGlobalContext(strongSelf->_context.ctx);
    JSObjectRef globalObjectJSRef = JSContextGetGlobalObject(strongSelf->_context.ctx);
    
    //从js的全局对象中获取BatchedBridge对象
    JSStringRef moduleNameJSStringRef = JSStringCreateWithUTF8CString("__fbBatchedBridge");
    JSValueRef moduleJSRef = JSObjectGetProperty(contextJSRef, globalObjectJSRef, moduleNameJSStringRef, &errorJSRef);
    JSStringRelease(moduleNameJSStringRef)
    if (moduleJSRef != NULL && errorJSRef == NULL && !JSValueIsUndefined(contextJSRef, moduleJSRef)) {
      //获取js对象相应的方法
      JSStringRef methodNameJSStringRef = JSStringCreateWithCFString((__bridge CFStringRef)method);
      JSValueRef methodJSRef = JSObjectGetProperty(contextJSRef, (JSObjectRef)moduleJSRef, methodNameJSStringRef, &errorJSRef);
      JSStringRelease(methodNameJSStringRef);
      if (methodJSRef != NULL && errorJSRef == NULL && !JSValueIsUndefined(contextJSRef, methodJSRef)) {
        // 调用相应的js函数
        if (arguments.count == 0) {
          resultJSRef = JSObjectCallAsFunction(contextJSRef, (JSObjectRef)methodJSRef, (JSObjectRef)moduleJSRef, 0, NULL, &errorJSRef);
        }
  };
  [self executeBlockOnJavaScriptQueue:myBlock];
}

可以看出native调用js的代码借助JavaScriptCore框架变的非常简单。

总结

上面简单的说明了react之间的通信过程，至于跟view相关的内容下次在讨论，这个其实才是react比较重要的内容，如果有兴趣欢迎一起交流～

参考

• http://facebook.github.io/react-native/
• http://tadeuzagallo.com/blog/react-native-bridge/