React Native 从入门到原理

start中有五个步骤

1. 加载 JavaScript 源码 （作用：方便oc以后注入和执行）

   //通过BundleURL加载JS源码
   //JavaScript 加载进内存中，对于一个空的项目来说，所有的 JavaScript 代码大约占用 1.5 Mb 的内存空间需要说明的是，在这一步中，JSX 代码已经被转化成原生的 JavaScript 代码
   
     [self loadSource:^(NSError *error, NSData *source, __unused int64_t sourceLength) {
       if (error) {
         RCTLogWarn(@"Failed to load source: %@", error);
         dispatch_async(dispatch_get_main_queue(), ^{
           [weakSelf stopLoadingWithError:error];
         });
       }
   
       sourceCode = source;
       dispatch_group_leave(initModulesAndLoadSource);
     } onProgress:^(RCTLoadingProgress *progressData) {
   #if RCT_DEV && __has_include("RCTDevLoadingView.h")
       RCTDevLoadingView *loadingView = [weakSelf moduleForClass:[RCTDevLoadingView class]];
       [loadingView updateProgress:progressData];
   #endif
     }];

2. 初始化模块信息（标记oc暴漏给js模块的方法 后面会生成配置表让并注入 js端  让js 获取所有类的名字）

   // Synchronously initialize all native modules that cannot be loaded lazily
     [self initModulesWithDispatchGroup:initModulesAndLoadSource];

    在方法 initModulesWithDispatchGroup: 主要任务是找到所有需要暴露给 JavaScript 的类。每一个需要暴露给 JavaScript 的类(也称为 Module，以下不作区分)都会标记一个宏：RCT_EXPORT_MODULE，这个宏的具体实现并不复杂：

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

   这样，这个类在 load 方法中就会调用 RCTRegisterModule 方法注册自己：

   void RCTRegisterModule(Class moduleClass)
   {
     static dispatch_once_t onceToken;
     dispatch_once(&onceToken, ^{
       RCTModuleClasses = [NSMutableArray new];
     });
    
     [RCTModuleClasses addObject:moduleClass];
   }

   因此，React Native 可以通过 RCTModuleClasses 拿到所有暴露给 JavaScript 的类。下一步操作是遍历这个数组，然后生成 RCTModuleData 对象：

   for (Class moduleClass in RCTGetModuleClasses()) {
       RCTModuleData *moduleData = [[RCTModuleData alloc]initWithModuleClass:moduleClass                                                                      bridge:self];
       [moduleClassesByID addObject:moduleClass];
       [moduleDataByID addObject:moduleData];
   }

   可以想见，RCTModuleData 对象是模块配置表的主要组成部分。如果把模块配置表想象成一个数组，那么每一个元素就是一个 RCTModuleData 对象。

   这个对象保存了 Module 的名字，常量等基本信息，最重要的属性是一个数组，保存了所有需要暴露给 JavaScript 的方法。

    Objective-C 管理模块配置表的逻辑是：Bridge 持有一个数组，数组中保存了所有的模块的 RCTModuleData 对象。只要给定 ModuleId 和 MethodId 就可以唯一确定要调用的方法。

   - (NSArray<id<RCTBridgeMethod>> *)methods{
       unsigned int methodCount;
       Method *methods = class_copyMethodList(object_getClass(_moduleClass), &methodCount); // 获取方法列表
       for (unsigned int i = 0; i < methodCount; i++) {
           RCTModuleMethod *moduleMethod = /* 创建 method */
           [_methods addObject:moduleMethod];
         }
       }
       return _methods;
   }

3. 初始化 JavaScript 代码的执行器，即 RCTJSCExecutor 对象（作用：oc调用js用 定时询问js）
   
   一般情况下，Objective-C 会定时、主动的调用 handleBuffer 方法
   

   //Objective-C 会定时、主动的调用 handleBuffer 方法询问js 有没有要调用我的消息啊
   // 每个一段时间发生一次：
   //OC：嘿，JS，有没有要调用我的方法呀？
   //JS：有的，我已经放倒 MessageQueue 里面了， MessageQueue给你 自己通过runtime去里面取出来用吧。
   //如果MessageQueue消息队列中有等待 Objective-C 处理的逻辑，而且 OC 超过 5ms 都没有来取走，那么 JavaScript 就会主动调用 Objective-C 的方法
   
   [self addSynchronousHookWithName:@"nativeFlushQueueImmediate" usingBlock:^(NSArray<NSArray *> *calls){
       [self->_bridge handleBuffer:calls batchEnded:NO];
   }];

    

   
   JavaScript 除了把调用信息放到 MessageQueue 中等待 Objective-C 来取以外，也可以主动调用 Objective-C 的方法

   if (global.nativeFlushQueueImmediate && now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS) { global.nativeFlushQueueImmediate(this._queue); // 调用 OC 的代码
    }

   然而由于卡顿或某些特殊原因，Objective-C 并不能总是保证能够准时的清空 MessageQueue，这就是为什么 JavaScript 也会在一定时间后主动的调用 Objective-C 的方法。查看上面 JavaScript 的代码可以发现，这个等待时间是 5ms。

   请牢牢记住这个 5ms，它告诉我们 JavaScript 与 Objective-C 的交互是存在一定开销的，不然就不会等待而是每次都立刻发起请求。其次，这个时间开销大约是毫秒级的，不会比 5ms 小太多，否则等待这么久就意义不大了
   
   

4. 生成模块列表并写入 JavaScript 端 (作用：让 JS 获取所有模块的名字 方便JS调用OC)
   这一步的操作就是为了让 JavaScript 获取所有模块的名字
   查看源码可以发现，Objective-C 把 config 字符串设置成 JavaScript 的一个全局变量，名字叫做：__fbBatchedBridgeConfig


   //之后OC 会将该返回的config 字符串 写入 JavaScript 端 设置成 JavaScript 的一个全局变量
   - (NSString *)moduleConfig{
       NSMutableArray<NSArray *> *config = [NSMutableArray new];
       for (RCTModuleData *moduleData in _moduleDataByID) {
         [config addObject:@[moduleData.name]];
       }
   }

    

5. 执行 JavaScript 源码
   代码已经加载进了内存，该做的配置也已经完成，只要把 JavaScript 代码运行一遍即可
   至此，JavaScript 和 Objective-C 都具备了向对方交互的能力，准备工作也就全部完成了