乐趣区

关于javascript:ReactNative与iOS原生通信原理解析通信篇

jiezi

导语：其实本来是想编写一篇 react-native (下文简称 rn) 在 iOS 中如何实现 jsbridge 的文章; 置信看过官网文档的同学都分明 rn 和 iOS 通信应用了一个叫 RCTBridgeModule 的模块去实现；置信大家与我一样，不能知其然不知其所以然；所以决定去翻一番 rn 的源码，一探其 rn 与 iOS 通信的机制。后果随着剖析的深刻发现内容较多；于是编写了 ReactNative 与 iOS 原生通信原理解析 - 初始化 和 ReactNative 与 iOS 原生通信原理解析 -JS 加载及执行篇 两篇 RN 源码剖析文章。

本文将在上述两篇文章的根底上，持续深刻了解 RN 与 iOS 原生通信机制。

申明: 本文所应用的 rn 版本为0.63.0。

# 缘起

看过后面一篇 ReactNative 与 iOS 原生通信原理解析 -JS 加载及执行篇 的同学应该曾经分明，在执行实现 js 代码之后，会在 JSIExecutor 中执行 flush 函数；flush 函数中会在首次时对 JS 和 native 进行绑定；在绑定之后 native 就能够调用 JS 函数，实现 native to js 之间的通信。


// 各种 js 办法向 native 的绑定
void JSIExecutor::bindBridge() {std::call_once(bindFlag_, [this] {
    // 通过 js 侧的__fbBatchedBridge 获取对应的 batchedBridge
    Value batchedBridgeValue =
        runtime_->global().getProperty(*runtime_, "__fbBatchedBridge");
    if (batchedBridgeValue.isUndefined()) {
      throw JSINativeException("Could not get BatchedBridge, make sure your bundle is packaged correctly");
    }
// 把 batchedBridge 中的 callFunctionReturnFlushedQueue 和 JSIExecutor 对象的 callFunctionReturnFlushedQueue_进行绑定
    Object batchedBridge = batchedBridgeValue.asObject(*runtime_);
    callFunctionReturnFlushedQueue_ = batchedBridge.getPropertyAsFunction(*runtime_, "callFunctionReturnFlushedQueue");
  // 把 batchedBridge 中的 invokeCallbackAndReturnFlushedQueue 和 JSIExecutor 中的 invokeCallbackAndReturnFlushedQueue_进行绑定；invokeCallbackAndReturnFlushedQueue_ = batchedBridge.getPropertyAsFunction(*runtime_, "invokeCallbackAndReturnFlushedQueue");
  // 把 batchedBridge 中的 flushedQueue 和 JSIExecutor 中的 flushedQueue_进行绑定。flushedQueue_ =
        batchedBridge.getPropertyAsFunction(*runtime_, "flushedQueue");
  });
}

好啦，咱们当初曾经晓得在整个 JS 执行实现之后会进行 js 函数和 native 的绑定；那么 native 是如何执行 JS 函数的呢？上面咱们一起来理解。

# Native to JS

不知您是否还记得，native 在执行 js 代码的时候，有一个回调函数，函数外部通过事件的形式告诉 RCTRootView javascript 曾经加载。

// js 代码的执行
  - (void)executeSourceCode:(NSData *)sourceCode sync:(BOOL)sync{
  // js 代码执行回调
  dispatch_block_t completion = ^{
    // 当 js 代码执行实现，须要刷新 js 执行事件队列
    [self _flushPendingCalls];

    // 在主线程中告诉 RCTRootView; js 代码曾经执行结束；当 RCTRootView 接管到告诉就会挂在并展现
    dispatch_async(dispatch_get_main_queue(), ^{[[NSNotificationCenter defaultCenter] postNotificationName:RCTJavaScriptDidLoadNotification
                                                          object:self->_parentBridge
                                                        userInfo:@{@"bridge" : self}];

      [self ensureOnJavaScriptThread:^{
        // 定时器继续执行
        [self->_displayLink addToRunLoop:[NSRunLoop currentRunLoop]];
      }];
    });
  };

  if (sync) {
    // 同步执行 js 代码
    [self executeApplicationScriptSync:sourceCode url:self.bundleURL];
    completion();} else {
    // 异步执行 js 代码
    [self enqueueApplicationScript:sourceCode url:self.bundleURL onComplete:completion];
  }

  [self.devSettings setupHotModuleReloadClientIfApplicableForURL:self.bundleURL];
}

在 RCTRootView 中会监听 RCTJavaScriptDidLoadNotification 事件；并执行如下办法:

 (void)javaScriptDidLoad:(NSNotification *)notification
{// 获取到 RCTBridge 的实例 batchedBridge(可能有点超前了，前面会将)
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _contentView.bridge) {[self bundleFinishedLoading:bridge];
  }
}

- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
  // ...
  [_contentView removeFromSuperview];
  _contentView = [[RCTRootContentView alloc] initWithFrame:self.bounds
                                                    bridge:bridge
                                                  reactTag:self.reactTag
                                           sizeFlexiblity:_sizeFlexibility];
  // 利用 RCTBridge 调用 js 办法，启动页面
  [self runApplication:bridge];
  // 展现页面
  [self insertSubview:_contentView atIndex:0];
}

- (void)runApplication:(RCTBridge *)bridge
{
  NSString *moduleName = _moduleName ?: @"";
  NSDictionary *appParameters = @{
    @"rootTag" : _contentView.reactTag,
    @"initialProps" : _appProperties ?: @{},};
   // 调用 RCTCxxBridge 的 enqueueJSCall:method:args:completion: 办法
  [bridge enqueueJSCall:@"AppRegistry" method:@"runApplication" args:@[ moduleName, appParameters] completion:NULL];
}

对于 bridge enqueueJSCall, rn 会着 Instance->NativeToJsBridge->JSIExecutor 这个调用链调用了 JSIExecutor::callFunction 办法，办法内调用了 JSIExecutor 的 callFunctionReturnFlushedQueue_办法。

在 bindBridge 中 callFunctionReturnFlushedQueue_ 是通过 runtime 的形式将 native 的 callFunctionReturnFlushedQueue_ 指向了 js 中的 callFunctionReturnFlushedQueue 函数的。

native 将 moduleId、methodId、arguements 作为参数执行 JS 侧的 callFunctionReturnFlushedQueue 函数，函数会返回一个 queue; 这个 queue 就是 JS 须要 native 侧执行的办法；最初 native 侧交给 callNativeModules 去执行对应的办法。

js 侧应用 callFunction 获取到指定的 module 和 method; 应用 apply 执行对应办法。


// RCTxxBridge.mm

- (void)enqueueJSCall:(NSString *)module
               method:(NSString *)method
                 args:(NSArray *)args
           completion:(dispatch_block_t)completion{if (strongSelf->_reactInstance) {
        // 调用了 Instance.callJSFunction
      strongSelf->_reactInstance->callJSFunction([module UTF8String], [method UTF8String], convertIdToFollyDynamic(args ?: @[]));
    }
  }];
}
// Instance.cpp
void Instance::callJSFunction(
    std::string &&module,
    std::string &&method,
    folly::dynamic &&params) {callback_->incrementPendingJSCalls();
  // 调用 NativeToJsBridge 的 callFunction
  nativeToJsBridge_->callFunction(std::move(module), std::move(method), std::move(params));
}

// NativeToJsBridge.cpp
void NativeToJsBridge::callFunction(
    std::string &&module,
    std::string &&method,
    folly::dynamic &&arguments) {
  runOnExecutorQueue([this,
                      module = std::move(module),
                      method = std::move(method),
                      arguments = std::move(arguments),
                      systraceCookie](JSExecutor *executor) {
    // 调用了 JSIExecutor 中的 callFunction
    executor->callFunction(module, method, arguments);
  });
}

// JSIExecutor.cpp

void JSIExecutor::callFunction(
    const std::string &moduleId,
    const std::string &methodId,
    const folly::dynamic &arguments) {
// 如果还未将 callFunctionReturnFlushedQueue_和 js 函数中的 callFunctionReturnFlushedQueue 函数进行绑定，那么首先进行绑定
  if (!callFunctionReturnFlushedQueue_) {bindBridge();
  }

  Value ret = Value::undefined();
  try {
    scopedTimeoutInvoker_([&] {
        // 调用 callFunctionReturnFlushedQueue_  传入 JS moduleId、methodId、arguements 参数，JS 侧会返回 queue
          ret = callFunctionReturnFlushedQueue_->call(
              *runtime_,
              moduleId,
              methodId,
              valueFromDynamic(*runtime_, arguments));
        },
        std::move(errorProducer));
  } catch (...) { }
// 执行 native modules
  callNativeModules(ret, true);
}

// MessageQueue.js

 callFunctionReturnFlushedQueue(
    module: string,
    method: string,
    args: any[],): null | [Array<number>, Array<number>, Array<any>, number] {this.__guard(() => {this.__callFunction(module, method, args);
    });

    return this.flushedQueue();}

    __callFunction(module: string, method: string, args: any[]): void {this._lastFlush = Date.now();
    this._eventLoopStartTime = this._lastFlush;
    const moduleMethods = this.getCallableModule(module);
    moduleMethods[method].apply(moduleMethods, args);
  }

除开方才咱们讲过的 callFunctionReturnFlushedQueue_ 和 js 侧的 callFunctionReturnFlushedQueue 函数进行绑定过，还有 invokeCallbackAndReturnFlushedQueue 和flushedQueue也有绑定。此处就不做过多解说，有趣味的同学能够去查阅一下 invokeCallbackAndReturnFlushedQueue和 flushedQueue；其实现原理和 callFunctionReturnFlushedQueue 是相似的。

流程图请见文末！

# JS to Native

what, 都在后面 native to js 中讲过 启动 AppRegistry.runApplication 了；页面都启动了；为啥还不讲 js to native呢? 讲真，不是笔者偷懒，而是想在您在晓得 RN 初始化整体流程 ，RN 的 jsbundle 加载及执行流程 以及 native 调用 JS 三座大山的根底只是之后，再深刻去理解 JS 调用 native。

js to native 可能比拟绕，咱们先来看一下整个流程:

RN 官网文档通知咱们，能够应用 NativeModules 和 iOS 进行通信；那么咱们先来看看在 JS 端，咱们是如何应用 NativeModules 的。

import {NativeModules} from "react-native";
// 获取到本人在 iOS 端的 native module :ReactJSBridge
const JSBridge = NativeModules.ReactJSBridge;
// 调用对应 Module 的对应办法
JSBridge.callWithCallback();

重点就在 NativeModules 这个模块，在 react-native 源码中，NativeModules == global.nativeModuleProxy == native 的 NativeModuleProxy的；在之前的 rn 初始化阶段讲过在 NativeToJsBridge 初始化的时候会调用 JSIExecutor 的initializeRuntime; 初始化一些 js 和 native 之间的桥梁。

let NativeModules: {[moduleName: string]: Object, ... } = {};
if (global.nativeModuleProxy) {NativeModules = global.nativeModuleProxy;}

// NativeToJsBridge.cpp
void NativeToJsBridge::initializeRuntime() {
  runOnExecutorQueue([](JSExecutor *executor) mutable {executor->initializeRuntime(); });
}
// JSIExecutor.cpp
void JSIExecutor::initializeRuntime() {SystraceSection s("JSIExecutor::initializeRuntime");
  runtime_->global().setProperty(
      *runtime_,
      "nativeModuleProxy",
      Object::createFromHostObject(*runtime_, std::make_shared<NativeModuleProxy>(nativeModules_)));
}

在 JS 侧调用 NativeModules. 本人的模块名称 也同步会触发 native 端的 NativeModuleProxy::get 办法; 并同步调用 JSINativeModules::getModule 和JSINativeModules::createModule办法；在 JSINativeModules::createModule 办法中会利用 js 端的 __fbGenNativeModule 获取 Module 信息。查阅 JS 端的 __fbGenNativeModule 函数，发现 **\_\_fbGenNativeModule==JS 侧的 genModule 办法 **

// JSIExecutor.cpp NativeModuleProxy
  Value get(Runtime &rt, const PropNameID &name) override {if (name.utf8(rt) == "name") {return jsi::String::createFromAscii(rt, "NativeModules");
    }

    auto nativeModules = weakNativeModules_.lock();
    if (!nativeModules) {return nullptr;}

    return nativeModules->getModule(rt, name);
  }
// JSINativeModules.cpp
Value JSINativeModules::getModule(Runtime &rt, const PropNameID &name) {if (!m_moduleRegistry) {return nullptr;}

  std::string moduleName = name.utf8(rt);

  const auto it = m_objects.find(moduleName);
  if (it != m_objects.end()) {return Value(rt, it->second);
  }

  auto module = createModule(rt, moduleName);
  if (!module.hasValue()) {return nullptr;}

  auto result =
      m_objects.emplace(std::move(moduleName), std::move(*module)).first;
  return Value(rt, result->second);
}

folly::Optional<Object> JSINativeModules::createModule(
    Runtime &rt,
    const std::string &name) {if (!m_genNativeModuleJS) {
    m_genNativeModuleJS =
        rt.global().getPropertyAsFunction(rt, "__fbGenNativeModule");
  }

  auto result = m_moduleRegistry->getConfig(name);

  Value moduleInfo = m_genNativeModuleJS->call(
      rt,
      valueFromDynamic(rt, result->config),
      static_cast<double>(result->index));

  folly::Optional<Object> module(moduleInfo.asObject(rt).getPropertyAsObject(rt, "module"));

  return module;
}

JS 侧的 getModule 函数，会利用 native module 传递的 Module 信息(moduleName,moduleInfo)，将以后须要执行的函数塞入队列中BatchedBridge.enqueueNativeCall。等 native 过去调 JS 的任意办法时，再把这个队列返回给 native，此时 native 再执行这个队列里要调用的办法。

如果 native 迟迟不调用 JS，JS 规定了一个工夫阈值，这阈值是 5ms，如果超过 5ms后仍旧没有 native call JS。那么 JS 就会被动触发队列的刷新，即立刻让 native 侧执行队列中缓存的一系列的办法。

// NativeModules.js
function genModule(
  config: ?ModuleConfig,
  moduleID: number
): ?{
  name: string,
  module?: Object,
  ...
} {const [moduleName, constants, methods, promiseMethods, syncMethods] = config;

  if (!constants && !methods) {
    // Module contents will be filled in lazily later
    return {name: moduleName};
  }

  const module = {};
  methods &&
    methods.forEach((methodName, methodID) => {
      const isPromise =
        promiseMethods && arrayContains(promiseMethods, methodID);
      const isSync = syncMethods && arrayContains(syncMethods, methodID);
      const methodType = isPromise ? "promise" : isSync ? "sync" : "async";
      // 留神这里，重点，genMethod 会将以后 Method 塞入队列
      module[methodName] = genMethod(moduleID, methodID, methodType);
    });

  Object.assign(module, constants);

  return {name: moduleName, module};
}

// export this method as a global so we can call it from native
global.__fbGenNativeModule = genModule;

function genMethod(moduleID: number, methodID: number, type: MethodType) {
  let fn = null;
  // 如果是 promise 类型的，须要塞入执行队列
  if (type === "promise") {fn = function promiseMethodWrapper(...args: Array<any>) {
      // In case we reject, capture a useful stack trace here.
      const enqueueingFrameError: ExtendedError = new Error();
      return new Promise((resolve, reject) => {
        BatchedBridge.enqueueNativeCall(
          moduleID,
          methodID,
          args,
          (data) => resolve(data),
          (errorData) =>
            reject(updateErrorWithErrorData(errorData, enqueueingFrameError))
        );
      });
    };
  } else {fn = function nonPromiseMethodWrapper(...args: Array<any>) {const lastArg = args.length > 0 ? args[args.length - 1] : null;
      const secondLastArg = args.length > 1 ? args[args.length - 2] : null;
      const hasSuccessCallback = typeof lastArg === "function";
      const hasErrorCallback = typeof secondLastArg === "function";
      const onSuccess = hasSuccessCallback ? lastArg : null;
      const onFail = hasErrorCallback ? secondLastArg : null;
      const callbackCount = hasSuccessCallback + hasErrorCallback;
      args = args.slice(0, args.length - callbackCount);
      if (type === "sync") {
        return BatchedBridge.callNativeSyncHook(
          moduleID,
          methodID,
          args,
          onFail,
          onSuccess
        );
      } else {
          // 也要记得塞入队列怕
        BatchedBridge.enqueueNativeCall(
          moduleID,
          methodID,
          args,
          onFail,
          onSuccess
        );
      }
    };
  }
  fn.type = type;
  return fn;
}

// MessageQueue.js
// 工夫阈值
const MIN_TIME_BETWEEN_FLUSHES_MS = 5;

enqueueNativeCall(
    moduleID: number,
    methodID: number,
    params: any[],
    onFail: ?Function,
    onSucc: ?Function,
  ) {this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    // 将 module,methodName 以及参数塞入队列中
    this._queue[MODULE_IDS].push(moduleID);
    this._queue[METHOD_IDS].push(methodID);
    this._queue[PARAMS].push(params);

    const now = Date.now();
    // 如果 native 迟迟不调用 JS，JS 规定了一个工夫阈值，这阈值是 5ms，如果超过 5ms 后仍旧没有 native call JS。那么 JS 就会被动触发队列的刷新，即立刻让 native 侧执行队列中缓存的一系列的办法。if (
      global.nativeFlushQueueImmediate &&
      now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS
    ) {
      const queue = this._queue;
      this._queue = [[], [], [], this._callID];
      this._lastFlush = now;
      global.nativeFlushQueueImmediate(queue);
    }
    this.__spy({
        type: TO_NATIVE,
        module: moduleID + '',
        method: methodID,
        args: params,
      });
  }

在 JS 侧应用 nativeFlushQueueImmediate 立刻调用会触发 native 的 callNativeModules 办法，并执行 native 办法。

// JSIExecutor.cpp
void JSIExecutor::initializeRuntime() {runtime_->global().setProperty(
      *runtime_,
      "nativeFlushQueueImmediate",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeFlushQueueImmediate"),
          1,
          [this](
              jsi::Runtime &,
              const jsi::Value &,
              const jsi::Value *args,
              size_t count) {if (count != 1) {
              throw std::invalid_argument("nativeFlushQueueImmediate arg count must be 1");
            }
            callNativeModules(args[0], false);
            return Value::undefined();}));
}

至此,js to native的解说曾经结束；当初咱们对 js 调用 native 做一个简略的小结。

  1. js to native，会利用 NativeModules(NativeModules == global.nativeModuleProxy == native 的 NativeModuleProxy)调用 native 侧的 getModule->createModule 直到调用到 js 侧的__fbGenNativeModule 也就是 js 侧的 getModule 函数；
  2. js 侧的 getModule 函数会返回以后 Module 的信息给 native，并将以后的 moduleId,methodId 曾经 params 塞入队列；通过比照高低两次申请的工夫距离是否 >5ms，则会利用 nativeFlushQueueImmediate 立刻调用native modules.

一个疑难？为什么 js 不间接调用 native 而是通过塞入队列的形式

集体了解：js 触发 native 其实是一个很频繁的过程，能够设想 scrollView 的滚动，动画的实现等等，将会带来十分大的性能开销；如果不做缓存立刻执行的话，RN 的整体性能会降落；所以 RN 端利用队列的形式进行 native modules 调用的缓存；以此达到性能优化的目标。

# 总结

下面咱们曾经学习了 Native to JS和 JS to Native 流程，上面咱们从整体来看一下 js 和 native 是如何交互的。

Native to JS

  1. native 执行实现 js 代码会发送一个 RCTJavaScriptDidLoadNotification 工夫给 RCTRootView;
  2. RCTRootView 接管工夫后会应用 batchedBridge->enqueueJSCall 去执行 AppRegistry.runApplication 函数；启动 RN 页面。
  3. 执行 enqueueJSCall 的过程会沿着 Instance->NativeToJsBridge->JSIExecutor 这个调用链调用了 JSIExecutor::callFunction 办法，办法内调用了 JSIExecutor 的 callFunctionReturnFlushedQueue_ 办法。
  4. callFunctionReturnFlushedQueue_因为曾经和 JS 侧的 callFunctionReturnFlushedQueue 办法曾经绑定，所以在执行此 js 函数时会执行 callFunction 办法，应用 js 的 apply 函数执行module.methodName 的调用。

JS to Native

  1. js to native，会利用 NativeModules(NativeModules == global.nativeModuleProxy == native 的 NativeModuleProxy)调用 native 侧的 getModule->createModule 直到调用到 js 侧的__fbGenNativeModule 也就是 js 侧的 getModule 函数；
  2. js 侧的 getModule 函数会返回以后 Module 的信息给 native，并将以后的 moduleId,methodId 曾经 params 塞入队列；通过比照高低两次申请的工夫距离是否 >5ms，则会利用 nativeFlushQueueImmediate 立刻调用native modules.

ReactNative 与 iOS 原生通信原理解析系列

  • ReactNative 与 iOS 原生通信原理解析 - 初始化
  • ReactNative 与 iOS 原生通信原理解析 -JS 加载及执行篇
  • ReactNative 与 iOS 原生通信原理解析 - 通信篇

退出移动版