react-native框架中iOS端启动流程（超级详细）

为了进一步了解rn工作原理。近期在梳理rn项目启动流程。写篇文章记录一下。
梳理的过程。新建一个空白的rn项目。然后从iOS启动的代码深入进去，了解整个项目启动过程里都发生了什么事情。ps： 本文侧重于启动流程，未涉及到reload的流程。
代码版本：

  "react": "16.13.1",
  "react-native": "0.63.3"

整体流程简介

---

一. 创建bridge
核心方法： RCTCxxBridge 中的 Start

• 1、发送js将要loading的通知
• 2、创建js线程
• 3、加载原生模块
• 4、创建reactInstance实例
• 5、创建jsExecutor
• 6、创建nativeToJsBridge
• 7、加载js代码
• 8、执行js代码

二. 创建rootView

• 1. 创建视图
• 2. 添加监听
• 3. 显示加载画面
• 4. 处理js加载完毕后的逻辑

三. 添加到window上显示

结合代码梳理上述流程

---

首先我们看在AppDelegate.m里，（对于不太了解iOS的同学，可以任务这里是项目的入口）

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  ...

  // 1.初始化bridge
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  // 2.创建rootView
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"rnNativeSourceCodeLearnDemo"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  // 3.创建跟控制器
  UIViewController *rootViewController = [UIViewController new];
  // 4.将rootViewController上面的视图替换为rootView
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  // 5.window显示
  [self.window makeKeyAndVisible];
  return YES;
}

从上述代码中可以看到。整个rn启动整体上看就做了两件事情：

• 1、创建bridge
• 2、创建rootView

先看第一个阶段

一、创建Bridge

---

从RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];开始，往里查看

RCTBridge.m

- (instancetype)initWithDelegate:(id)delegate launchOptions:(NSDictionary *)launchOptions
{
  return [self initWithDelegate:delegate bundleURL:nil moduleProvider:nil launchOptions:launchOptions];
}

- (instancetype)initWithDelegate:(id)delegate
                       bundleURL:(NSURL *)bundleURL
                  moduleProvider:(RCTBridgeModuleListProvider)block
                   launchOptions:(NSDictionary *)launchOptions
{
  if (self = [super init]) {
    _delegate = delegate;
    _bundleURL = bundleURL;
    _moduleProvider = block;
    _launchOptions = [launchOptions copy];

    [self setUp];
  }
  return self;
}

- (void)setUp
{
  ...

  Class bridgeClass = self.bridgeClass;

  ...

  self.batchedBridge = [[bridgeClass alloc] initWithParentBridge:self];
  [self.batchedBridge start];

  ...
}

最终核心的逻辑都是在RCTCxxBridge的start方法里,也就是文章一开始列举的8个步骤，下面是方法全部的内容：

// RCTCxxBridge.mm
- (void)start
{
  ...
// 1.发送通知：js将要开始loading
  [[NSNotificationCenter defaultCenter] postNotificationName:RCTJavaScriptWillStartLoadingNotification
                                                      object:_parentBridge
                                                    userInfo:@{@"bridge" : self}];

// 2、创建jsThread，（用来负责执行js代码）
  // Set up the JS thread early
  _jsThread = [[NSThread alloc] initWithTarget:[self class] selector:@selector(runRunLoop) object:nil];
  _jsThread.name = RCTJSThreadName;
  _jsThread.qualityOfService = NSOperationQualityOfServiceUserInteractive;
#if RCT_DEBUG
  _jsThread.stackSize *= 2;
#endif
  [_jsThread start];

  dispatch_group_t prepareBridge = dispatch_group_create();

  ...

// 3、加载原生模块
// 3.1、加载用户自定义的原生模块
  [self registerExtraModules];
  // Initialize all native modules that cannot be loaded lazily
// 3.2、加载官方定义的原生模块
  (void)[self _initializeModules:RCTGetModuleClasses() withDispatchGroup:prepareBridge lazilyDiscovered:NO];
// 3.3、加载调试相关的原生模块
  [self registerExtraLazyModules];

  [_performanceLogger markStopForTag:RCTPLNativeModuleInit];

// 4、创建reactInstance实例。实际啥都没做，真实操作发生在后续的initializeBridge。不太清楚这里为啥这么写，跪请了解的大佬指点迷津。
  // This doesn't really do anything.  The real work happens in initializeBridge.
  _reactInstance.reset(new Instance);

  __weak RCTCxxBridge *weakSelf = self;

// 5、创建executorFactory对象。工厂模式的使用。内部会根据不同环境创建不同的executor。包括后期fb官方想切换executor，都很方便。
  // Prepare executor factory (shared_ptr for copy into block)
  std::shared_ptr executorFactory;
  if (!self.executorClass) {
    if ([self.delegate conformsToProtocol:@protocol(RCTCxxBridgeDelegate)]) {
      id cxxDelegate = (id)self.delegate;
      executorFactory = [cxxDelegate jsExecutorFactoryForBridge:self];
    }
    if (!executorFactory) {
      executorFactory = std::make_shared(nullptr);
    }
  } else {
    id objcExecutor = [self moduleForClass:self.executorClass];
    executorFactory.reset(new RCTObjcExecutorFactory(objcExecutor, ^(NSError *error) {
      if (error) {
        [weakSelf handleError:error];
      }
    }));
  }

// 6、在JavaScript线程内异步执行初始化NativeToJsBridge的方法。native和js交互的实现基础，都是在此步骤内实现的
  // Dispatch the instance initialization as soon as the initial module metadata has
  // been collected (see initModules)
  dispatch_group_enter(prepareBridge);
  [self ensureOnJavaScriptThread:^{
    [weakSelf _initializeBridge:executorFactory];
    dispatch_group_leave(prepareBridge);
  }];

// 7、异步加载jsbundle代码
  // Load the source asynchronously, then store it for later execution.
  dispatch_group_enter(prepareBridge);
  __block NSData *sourceCode;
  [self
      loadSource:^(NSError *error, RCTSource *source) {
        if (error) {
          [weakSelf handleError:error];
        }

        sourceCode = source.data;
        dispatch_group_leave(prepareBridge);
      }
      onProgress:^(RCTLoadingProgress *progressData) {
#if (RCT_DEV | RCT_ENABLE_LOADING_VIEW) && __has_include()
        id loadingView = [weakSelf moduleForName:@"DevLoadingView"
                                                      lazilyLoadIfNecessary:YES];
        [loadingView updateProgress:progressData];
#endif
      }];

// 8、 执行js代码。在6、7两个异步任务都完成后，才会触发该步骤执行
  // Wait for both the modules and source code to have finished loading
  dispatch_group_notify(prepareBridge, dispatch_get_global_queue(QOS_CLASS_USER_INTERACTIVE, 0), ^{
    RCTCxxBridge *strongSelf = weakSelf;
    if (sourceCode && strongSelf.loading) {
      [strongSelf executeSourceCode:sourceCode sync:NO];
    }
  });
  RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
}

接下来我们拆碎了看看每一步都做了些什么，探究一下rn这个框架的实现细节。

start方法内各个步骤的的细节

---

1.发送通知。

此处就是发送一个JavaScript将要开始加载的通知。

...

[[NSNotificationCenter defaultCenter] postNotificationName:RCTJavaScriptWillStartLoadingNotification
                                                      object:_parentBridge
                                                    userInfo:@{@"bridge" : self}];

...

2. 创建jsThread

...

 _jsThread = [[NSThread alloc] initWithTarget:[self class] selector:@selector(runRunLoop) object:nil];
  _jsThread.name = RCTJSThreadName;
  _jsThread.qualityOfService = NSOperationQualityOfServiceUserInteractive;
#if RCT_DEBUG
  _jsThread.stackSize *= 2;
#endif
  [_jsThread start];

...

创建一个js线程。后续js代码的执行都在这个线程里。除了js线程，后续还会出现一个js消息线程：jsMessageThread。这个线程处理的是native和js之间通信的。 runRunLoop的意义是线程保活。
整个rn框架里面存在三个线程：

• 主线程（UIThread）。负责渲染工作
• js线程(jsThread)。负责执行js代码。
• js消息线程(jsMessageThread)。负责管理所有的native和js之间的通讯。

+ (void)runRunLoop
{
  @autoreleasepool {
    
    ...

    // copy thread name to pthread name
    pthread_setname_np([NSThread currentThread].name.UTF8String);

    // Set up a dummy runloop source to avoid spinning
    CFRunLoopSourceContext noSpinCtx = {0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL};
    CFRunLoopSourceRef noSpinSource = CFRunLoopSourceCreate(NULL, 0, &noSpinCtx);
    CFRunLoopAddSource(CFRunLoopGetCurrent(), noSpinSource, kCFRunLoopDefaultMode);
    CFRelease(noSpinSource);

    ...

    // run the run loop
    while (kCFRunLoopRunStopped !=
           CFRunLoopRunInMode(
               kCFRunLoopDefaultMode, ((NSDate *)[NSDate distantFuture]).timeIntervalSinceReferenceDate, NO)) {
      RCTAssert(NO, @"not reached assertion"); // runloop spun. that's bad.
    }
  }
}

这个函数目的就是实现线程保活。如果开了子线程，不保活，执行完任务后，子线程就销毁了。

3、加载原生模块

该阶段内一共处理个三个事情。

• 1、加载用户自定义的原生模块
• 2、加载fb官方定义的原生模块
• 3、debug环境下加载debug相关的原生模块。比如LogBox

继续看一下每个加载过程都做了什么

3.1 加载用户自定义的原生模块

[self registerExtraModules];

// RCTCxxBridge.mm
- (void)registerExtraModules
{

  ...

// 获取所有的用户自定义的模块
  NSArray> *extraModules = nil;
  if ([self.delegate respondsToSelector:@selector(extraModulesForBridge:)]) {
    extraModules = [self.delegate extraModulesForBridge:_parentBridge];
  } else if (self.moduleProvider) {
    extraModules = self.moduleProvider();
  }

 ...

  // 遍历模块
  for (id module in extraModules) {
    Class moduleClass = [module class];
    NSString *moduleName = RCTBridgeModuleNameForClass(moduleClass);

   ...

    // 创建moduleData实例对象
    RCTModuleData *moduleData = [[RCTModuleData alloc] initWithModuleInstance:module bridge:self];
    // 用字典记录已经创建的结果，在后面阶段内，再次添加其他模块的时候，如果发现在此步骤已经有同名的，则不会再次创建。可以理解为我们可以重写某些官方定义的模块
    _moduleDataByName[moduleName] = moduleData;
    [_moduleClassesByID addObject:moduleClass];
    // 这个数组记录所有的的模块信息
    [_moduleDataByID addObject:moduleData];
  }

  ...

}

1、获取所有用户自定义的模块信息
2、遍历模块，逐一创建对应的moduleData。
3、将创建的moduleData添加到_moduleDataByID数组内

看到此处可能有人会有疑问： 怎么获取到的需要加载哪些原生模块的呢？
这个问题，我们先暂且不管。就认为目前已经能拿到所有的需要导出的给js的原生模块。后续会详细讨论这个问题。

3.2 加载官方定义的原生模块

(void)[self _initializeModules:RCTGetModuleClasses() withDispatchGroup:prepareBridge lazilyDiscovered:NO];
RCTCxxBridge.mm

- (NSArray *)_initializeModules:(NSArray *)modules
                               withDispatchGroup:(dispatch_group_t)dispatchGroup
                                lazilyDiscovered:(BOOL)lazilyDiscovered
{
  // 类似3.1中的处理过程，为导出的模块，创建对应的moduleData，添加到数组内。
  // 最终返回moduleDataById数组。内部会记录每个模块是否需要到主线程初始化。
  // 一般来讲涉及到UIKit相关的模块，以及需要创建静态变量的模块，都会需要到主线程实例化
  NSArray *moduleDataById = [self _registerModulesForClasses:modules
                                                             lazilyDiscovered:lazilyDiscovered];

  if (lazilyDiscovered) {
// 懒加载的模块此时不需要实例化对应的对象。但是貌似目前并没有需要懒加载的。
...

  } else {

    ...
    // 遍历上一步得到的moduleData列表
    for (RCTModuleData *moduleData in _moduleDataByID) {
      if (moduleData.hasInstance && (!moduleData.requiresMainQueueSetup || RCTIsMainQueue())) {
        // 不需要到主线程的就在当前线程实例化
        (void)[moduleData instance];
      }
    }

    ...

    // From this point on, RCTDidInitializeModuleNotification notifications will
    // be sent the first time a module is accessed.
    _moduleSetupComplete = YES;
    // 处理需要到主线程处理的模块
    [self _prepareModulesWithDispatchGroup:dispatchGroup];
  }

...

  return moduleDataById;
}

• 1、类似3.1中的处理过程，为导出的模块创建对应的moduleData，添加到数组内。最终返回moduleDataById。内部会记录每个模块是否需要到主线程初始化。一般来讲涉及到UIKit相关的模块和需要创建静态变量的模块，都会需要到主线程实例化
• 2、遍历上一步的moduleDataById中的moduleData。如果不需要用到主线程的，就在当前实例化
• 3 最后处理要用到主线程的模块

看一下第一步的细节

- (NSArray *)_registerModulesForClasses:(NSArray *)moduleClasses
                                        lazilyDiscovered:(BOOL)lazilyDiscovered
{

  ...

  NSArray *moduleClassesCopy = [moduleClasses copy];
  NSMutableArray *moduleDataByID = [NSMutableArray arrayWithCapacity:moduleClassesCopy.count];
  // 遍历所有的模块
  for (Class moduleClass in moduleClassesCopy) {
    if (RCTTurboModuleEnabled() && [moduleClass conformsToProtocol:@protocol(RCTTurboModule)]) {
      continue;
    }
    NSString *moduleName = RCTBridgeModuleNameForClass(moduleClass);

    RCTModuleData *moduleData = _moduleDataByName[moduleName];
    // 如果已经存在moduleData，就continue。
    if (moduleData) {
      if (moduleData.hasInstance || lazilyDiscovered) {
        continue;
      } else if ([moduleClass new] == nil) {
        continue;
      } else if ([moduleData.moduleClass new] != nil) {
        RCTLogWarn(
            @"Attempted to register RCTBridgeModule class %@ for the "
             "name '%@', but name was already registered by class %@",
            moduleClass,
            moduleName,
            moduleData.moduleClass);
      }
    }
    // 实例化还没有moduleData的模块，
    moduleData = [[RCTModuleData alloc] initWithModuleClass:moduleClass bridge:self];

    _moduleDataByName[moduleName] = moduleData;
    [_moduleClassesByID addObject:moduleClass];
    // 添加到本方法内部数组里
    [moduleDataByID addObject:moduleData];
  }
  // 将此阶段所有的模块moduleData合并到总数组里
  [_moduleDataByID addObjectsFromArray:moduleDataByID];

   ...

  return moduleDataByID;
}

继续看一下第三步的方法，看一下具体怎么处理需要到主线程实例化的模块

- (void)_prepareModulesWithDispatchGroup:(dispatch_group_t)dispatchGroup
{

  ...

  BOOL initializeImmediately = NO;
  if (dispatchGroup == NULL) {
    
    ...

    initializeImmediately = YES;
  }

  ...
  
  // 遍历所有的moduleData
  for (RCTModuleData *moduleData in _moduleDataByID) {
    // 如果需要到主线程设置
    if (moduleData.requiresMainQueueSetup) {
       // 创建对应的block
      dispatch_block_t block = ^{
        if (self.valid && ![moduleData.moduleClass isSubclassOfClass:[RCTCxxModule class]]) {
          ...
          (void)[moduleData instance];
          [moduleData gatherConstants];
          ...
        }
      };
      
      // 如果当前在主线程，立即执行对应的任务
      if (initializeImmediately && RCTIsMainQueue()) {
        block();
      } else {
        // 如果不是，切换到主线程执行block
        if (dispatchGroup) {
          dispatch_group_async(dispatchGroup, dispatch_get_main_queue(), block);
        }
      }
      _modulesInitializedOnMainQueue++;
    }
  }
  
   ...

}

• 1、遍历所有的moduleData
• 2、如果需要到主线程设置
• 3、创建实例化模块的block
• 4、 如果当前在主线程，立即执行对应的任务
• 5、 如果不是，切换到主线程执行block

4、 创建reactInstance实例

啥都没做。比较奇怪这里为什么会这么写。跪请了解的大佬指点迷津。

...

// 官方注释：此时啥都没做，实际的工作在initializeBridge里
_reactInstance.reset(new Instance);

...

5、 创建executorFactoty.

创建executorFactory对象。这里采用的工厂模式创建了一个执行器工厂，根据不同的环境可以最终创建不同的执行器实例。再生产环境下是JSIExecutor.关于执行器暂且可以理解为这相当于js引擎，其实不对，里面虽然最终会对应一个引擎，额外的还有很多事情。只不过不耽误理解整体rn框架的逻辑。

...

__weak RCTCxxBridge *weakSelf = self;

  // Prepare executor factory (shared_ptr for copy into block)
  std::shared_ptr executorFactory;
  if (!self.executorClass) {
    if ([self.delegate conformsToProtocol:@protocol(RCTCxxBridgeDelegate)]) {
      id cxxDelegate = (id)self.delegate;
      executorFactory = [cxxDelegate jsExecutorFactoryForBridge:self];
    }
    if (!executorFactory) {
      executorFactory = std::make_shared(nullptr);
    }
  } else {
    id objcExecutor = [self moduleForClass:self.executorClass];
    executorFactory.reset(new RCTObjcExecutorFactory(objcExecutor, ^(NSError *error) {
      if (error) {
        [weakSelf handleError:error];
      }
    }));
  }

...

6、 创建bridge.（最核心的部分）

这个部分一步步打通了native和js的通讯桥梁。使得native和js之间可以互相通讯。这地方能回答平时面试里可能遇到的native和js怎么通讯这个问题。

bridge的构建发生在JavaScript线程里。
此处强调一下。代码里多处出现bridge的说法。rn框架内也常常有人说通过bridge管理通讯。但是在代码里bridge就多个：

• RCTBridge。这个是最外层，是oc版本的bridge。内部包含RCTCxxBridge
• RCTCxxBridge。c++版本的bridge。内部包含NativeToJsBridge
• NativeToJsBridge。c++实现的。这个是管理原生端向js端通讯的bridge。内部直接可以获取到JSCRuntime（等同于引擎）。处理通讯核心逻辑的bridge。后面会做详细分析。
  此处实例化bridge就是要构建所有的bridge，并打通native和js之间的通讯和交互。

...

dispatch_group_enter(prepareBridge);
  [self ensureOnJavaScriptThread:^{
    // 上一步创建的executorFactory做参数
    [weakSelf _initializeBridge:executorFactory];
    dispatch_group_leave(prepareBridge);
  }];

...

上一步创建的executorFactory做参数_initializeBridge

- (void)_initializeBridge:(std::shared_ptr)executorFactory
{
  if (!self.valid) {
    return;
  }
    // 在jsThread中创建JSMessageThread。并且把currentRunloop传递进去。
    // 猜测是两个线程共用了一个runloop对象保活。能保证两个线程声明周期一致？  
    // 不太确定这么写法的目的。同样跪请有了解的大佬指点迷津
  __weak RCTCxxBridge *weakSelf = self;
  _jsMessageThread = std::make_shared([NSRunLoop currentRunLoop], ^(NSError *error) {
    if (error) {
      [weakSelf handleError:error];
    }
  });

  ...

  // This can only be false if the bridge was invalidated before startup completed
  if (_reactInstance) {

    ...
  
    // 初始化bridge
    [self _initializeBridgeLocked:executorFactory];

     ...

  }

  ...

}

在jsThread中创建JSMessageThread。并且把currentRunloop传递进去。 猜测是两个线程共用了一个runloop对象保活。能保证两个线程声明周期一致？ 不太确定这么写法的目的。同样跪请有了解的大佬指点迷津。
然后走到[self _initializeBridgeLocked:executorFactory];方法。字面意思就能看明白是需要通过加锁的方式初始化bridge，确保线程安全

- (void)_initializeBridgeLocked:(std::shared_ptr)executorFactory
{
  // 加锁确保线程安全
  std::lock_guard guard(_moduleRegistryLock);

  // This is async, but any calls into JS are blocked by the m_syncReady CV in Instance
  _reactInstance->initializeBridge(
      std::make_unique(self),
      executorFactory,
      _jsMessageThread,
      [self _buildModuleRegistryUnlocked]);
  _moduleRegistryCreated = YES;
}

介绍一下_reactInstance->initializeBridge方法的参数：

• 初始化bridge成功后的回调
• executorFactory。一开始创建的执行器工厂对象
• jsMessageThread。这个是js消息线程。管理native和js之间通讯的
• 原生模块的注册后的信息。这里并不是直接将模块信息传递进去，而是将之前加载的所有原生模块，做了一层包装。这个新对象内部能获取到所有原生模块的信息。

看一下是怎么注册原生模块的

- (std::shared_ptr)_buildModuleRegistryUnlocked
{
  if (!self.valid) {
    return {};
  }

  ...

  // 创建一个原生模块查找不到的回调
  __weak __typeof(self) weakSelf = self;
  ModuleRegistry::ModuleNotFoundCallback moduleNotFoundCallback = ^bool(const std::string &name) {
    __strong __typeof(weakSelf) strongSelf = weakSelf;
    return [strongSelf.delegate respondsToSelector:@selector(bridge:didNotFindModule:)] &&
        [strongSelf.delegate bridge:strongSelf didNotFindModule:@(name.c_str())];
  };
  
  // 调用createNativeModules，获取原生模块注册管理对象registry
  auto registry = std::make_shared(
      createNativeModules(_moduleDataByID, self, _reactInstance), moduleNotFoundCallback);

  ...
  // 返回原生模块注册管理对象registry
  return registry;
}

createNativeModules(NSArray *modules, RCTBridge *bridge, const std::shared_ptr &instance)
{
  // 创建nativeModules对象
  std::vector> nativeModules;
  // 遍历所有的moduleData
  for (RCTModuleData *moduleData in modules) {
    // 如果是RCTCxxModule类的子类
    if ([moduleData.moduleClass isSubclassOfClass:[RCTCxxModule class]]) {
      // 包装成在添加进去CxxNativeModule
      nativeModules.emplace_back(std::make_unique(
          instance,
          [moduleData.name UTF8String],
          [moduleData] { return [(RCTCxxModule *)(moduleData.instance) createModule]; },
          std::make_shared(moduleData)));
    } else {
      // // 如果不是RCTCxxModule类的子类，包装成RCTNativeModule添加进去
      nativeModules.emplace_back(std::make_unique(bridge, moduleData));
    }
  }
  // 最终返回原生模块注册表
  return nativeModules;
}

这里整体概况一下，就是将之前生成的原生模块的配置信息添加到一个注册表里。然后把这个配置表对象，作为下一步的参数。

我们可以看到native模块是分为c++模块和oc模块两类的

最后看一下CxxNativeModule和RCTNativeModule的结构

class RN_EXPORT CxxNativeModule : public NativeModule {
 public:
  CxxNativeModule(
      std::weak_ptr instance,
      std::string name,
      xplat::module::CxxModule::Provider provider,
      std::shared_ptr messageQueueThread)
      : instance_(instance),
        name_(std::move(name)),
        provider_(provider),
        messageQueueThread_(messageQueueThread) {}

  std::string getName() override;
  std::vector getMethods() override;
  folly::dynamic getConstants() override;
  void invoke(unsigned int reactMethodId, folly::dynamic &¶ms, int callId)
      override;
  MethodCallResult callSerializableNativeHook(
      unsigned int hookId,
      folly::dynamic &&args) override;

 private:
  void lazyInit();

  std::weak_ptr instance_;
  std::string name_;
  xplat::module::CxxModule::Provider provider_;
  std::shared_ptr messageQueueThread_;
  std::unique_ptr module_;
  std::vector methods_;
};

// ------------------------------------我是一条分割线---------------------------------------------

class RCTNativeModule : public NativeModule {
 public:
  RCTNativeModule(RCTBridge *bridge, RCTModuleData *moduleData);

  std::string getName() override;
  std::vector getMethods() override;
  folly::dynamic getConstants() override;
  void invoke(unsigned int methodId, folly::dynamic &¶ms, int callId)
      override;
  MethodCallResult callSerializableNativeHook(
      unsigned int reactMethodId,
      folly::dynamic &¶ms) override;

 private:
  __weak RCTBridge *m_bridge;
  RCTModuleData *m_moduleData;
};

都会有这么几个方法

• 获取模块名：
  std::string getName() override:

• 获取模块里的方法列表
  std::vector getMethods() override：

• 获取模块里的常量
  folly::dynamic getConstants() override;:

• 执行某函数
  void invoke(unsigned int reactMethodId, folly::dynamic &¶ms, int callId) override; ：

• 序列化
  MethodCallResult callSerializableNativeHook( unsigned int hookId, folly::dynamic &&args) override;:

这里先看到这里我们回过头来继续看bridge的初始化

• 成功后的回调
• executorFactory。执行器工厂对象
• jsMessageThread。js消息线程。
• 原生模块的注册后的信息。

- (void)_initializeBridgeLocked:(std::shared_ptr)executorFactory
{
  std::lock_guard guard(_moduleRegistryLock);

  // This is async, but any calls into JS are blocked by the m_syncReady CV in Instance
  _reactInstance->initializeBridge(
      std::make_unique(self),
      executorFactory,
      _jsMessageThread,
      [self _buildModuleRegistryUnlocked]);
  _moduleRegistryCreated = YES;
}

initializeBridge在Instance.cpp中，是个c++的方法

// Instance.cpp
void Instance::initializeBridge(
    std::unique_ptr callback,
    std::shared_ptr jsef,
    std::shared_ptr jsQueue,
    std::shared_ptr moduleRegistry) {
  callback_ = std::move(callback);
  moduleRegistry_ = std::move(moduleRegistry);
  // 往jsQueue里添加一个任务。此处的jsQueue对应的线程是外部传进来的jsMessageThread。不是jsThread。
  jsQueue->runOnQueueSync([this, &jsef, jsQueue]() mutable {
    // 任务的内容
    // 1、创建nativeToJsBridge_实例
    nativeToJsBridge_ = std::make_shared(
        jsef.get(), moduleRegistry_, jsQueue, callback_);
    // 2、调用nativeToJsBridge_实例中初始化runtime的方法
    nativeToJsBridge_->initializeRuntime();

    // 3、将刚创建的nativeToJsBridge_设置给m_nativeToJsBridge记录下来。
    // 然后清空对js的调用的任务队列，清空是指取出来执行完。
    jsCallInvoker_->setNativeToJsBridgeAndFlushCalls(nativeToJsBridge_);

    std::lock_guard lock(m_syncMutex);
    m_syncReady = true;
    m_syncCV.notify_all();
  });

  ...

}

这个方法的本质是往js消息队列里添加了一个任务。后续在执行队列任务的时候，再取出来执行。
我们看一下这个任务的内容：

• 1、创建nativeToJsBridge_实例
• 2、调用nativeToJsBridge_实例中初始化runtime的方法
• 3、将刚创建的nativeToJsBridge_设置给m_nativeToJsBridge记录下来。然后清空对js的调用的任务队列，清空是指取出来执行完。
  本身是一个要入队的任务。这个任务里，最后还会触发一次取出来任务继续执行的操作。猜测一下：应该是因为在实际执行initializeRuntime是，可能队列里又加入别的任务，也要执行这些任务。

继续跟下去。看看初始化runtime做了啥：

// NativeToJsBridge.cpp
void NativeToJsBridge::initializeRuntime() {
  // 往执行队列里添加一个任务
  runOnExecutorQueue(
      // 任务本身是调用executor的初始化runtime
      [](JSExecutor *executor) mutable { executor->initializeRuntime(); });
}

这个方法本质也是创建一个任务，添加到执行队列里。
任务的内容是调用executor的初始化runtime方法

继续跟踪,看一下最终的初始化runtime发生了什么。 在JSIExecutor.cpp中

// JSIExecutor.cpp
void JSIExecutor::initializeRuntime() {
  SystraceSection s("JSIExecutor::initializeRuntime");
  // 1、在jscruntime中获取全局对象，设置一个nativeModuleProxy属性，value是一个NativeModuleProxy类型的对象
  runtime_->global().setProperty(
      *runtime_,
      "nativeModuleProxy",
      Object::createFromHostObject(
          *runtime_, std::make_shared(nativeModules_)));

  // 2、在jscruntime中获取全局对象，设置一个nativeFlushQueueImmediate属性，value是一个createFromHostFunction函数
  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();
          }));
  
  // 3、在jscruntime中获取全局对象，设置一个nativeCallSyncHook属性，value是一个createFromHostFunction函数
  runtime_->global().setProperty(
      *runtime_,
      "nativeCallSyncHook",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeCallSyncHook"),
          1,
          [this](
              jsi::Runtime &,
              const jsi::Value &,
              const jsi::Value *args,
              size_t count) { return nativeCallSyncHook(args, count); }));

      ...

  if (runtimeInstaller_) {
    runtimeInstaller_(*runtime_);
  }
  
   ...

}

敲黑板，全局核心。

native端获取到runtime实例。可以认为是js的执行环境。在这个环境的global对象上，添加了几个属性并赋值。这个global对象，在js的执行上下文中可以直接获取到。就是js里的global对象。global上的属性也能直接在js端获取到，并且直接使用。
这个地方是native和js之间直接交互的部分，也是native和js可以互相通讯的核心所在。
整个bridge的构建核心就是完成这个global对象的构建。

整个global对象类似下面的结构

    global = {
        nativeModuleProxy: NativeModuleProxy,
        nativeFlushQueueImmediate: (flushQueue) => { callNativeModules(flushQueue) },
        nativeCallSyncHook: (args) => {return nativeCallSyncHook(args, count)}
    }

概括的介绍一下这几个属性：

• nativeModuleProxy： 简单来说是原生模块的配置信息。本质上是对原生模块配置表的一个包装。内部可以通过moduleID，methodID可以查找到对应的原生模块和模块方法。
• nativeFlushQueueImmediate： 这个是一个函数，可以认为是js端负责调用。native负责实现。这个是js端唯二主动调用native的其中一个地方。
• nativeCallSyncHook： 本质是一个函数。js端负责调用，native端负责实现。当js端发起一个对原生模块的同步调用时，会在js端调用此方法。到达native端后，方法内会根据传递过来的moduleID和methodID查找到对应的原生模块的原生方法，执行完毕后，将结果返回给js端。这是另一个js端会直接调用native的地方。

自此native和js通讯的bridge基本构造完毕。实际native和js端能通信的的就是上述这个global对象。
为啥说是基本构造完毕，因为除了native端给global设置属性外，js端也会给这个global设置属性。后文会提到，此处先做个简介

    global = {
        nativeModuleProxy: NativeModuleProxy,
        nativeFlushQueueImmediate: (flushQueue) => { callNativeModules(flushQueue) },
        nativeCallSyncHook: (args) => {return nativeCallSyncHook(args, count)},
        __fbBatchedBridge: BatchedBridge, // js端添加的
        __fbGenNativeModule： function genModule(
                                 config: ?ModuleConfig,
                                 moduleID: number,
                              ): ?{
                                 name: string,
                                 module?: Object,
                                 ...
                              }, // js添加
    }

为了加深印象和便于理解，详细介绍一下这几个属性

• NativeModuleProxy： 负责管理所有的原生模块的注册信息。到了js端会对应rn开发中使用的NativeModules。是同一个对象。
  当在js端使用原生模块的时候：

import {NativeModules} from 'react-native';
const CalendarManager = NativeModules.CalendarManager;
export default CalendarManager;

NativeModules.CalendarManager,会调用到原生的NativeModuleProxy实例里的get方法

// JSIExecutor.app

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;
    }
    // 如果存在返回getModule执行后的结果
    return nativeModules->getModule(rt, name);
  }

NativeModuleProxy会根据传递过来的moduleName获取native端对应的模块注册信息，并返回给js端。

继续看看getModule做了什么

// JSINativeModules.cpp
Value JSINativeModules::getModule(Runtime &rt, const PropNameID &name) {
  // 如果原生模块的注册表对象不存在，返回空
  if (!m_moduleRegistry) {
    return nullptr;
  }

  // 获取要获取的模块名称
  std::string moduleName = name.utf8(rt);
  
  //  查询缓存，如果缓存里找到了，且不是最后一个，返回当前对象的second。
  const auto it = m_objects.find(moduleName);
  if (it != m_objects.end()) {
    return Value(rt, it->second);
  }
  
  //   如果缓存里没有找到，则创建module
  auto module = createModule(rt, moduleName);
  // 如果创建的模块是没有信息的，返回空
  if (!module.hasValue()) {
    // Allow lookup to continue in the objects own properties, which allows for
    // overrides of NativeModules
    return nullptr;
  }
  // 添加到缓存里，返回当前的second。具体为啥这么设计，不太明白。跪求了解的大佬指点
  auto result =
      m_objects.emplace(std::move(moduleName), std::move(*module)).first;
  return Value(rt, result->second);
}

• 1、查看原生模块注册表存不存在，不存在直接返回空
• 2、 根据moduleName获取对应的模块缓存信息，如果有缓存直接序列化一下返回给js端
• 3、 如果没有缓存则创建一份模块数据
• 4、 创建的数据如果没有值，也返回空
• 5、将新创建的模块信息添加到缓存里
• 6、将数据序列化以后返回给js端

在上述过程中，可以看到有个createModule的操作。
继续看看createModule里发生了什么

folly::Optional