React Native剖析

2017-06-02 本文已影响108人 Aaron丶丶

React Native 现在是异常的火爆，我司最近也完成了一个 React Native 编写的项目，现在已经提测审核。大家关心的苹果会不会拒绝RN ，会不会拒绝 CodePush ，我们会用实际行动告诉大家。

本文会介绍 React Native 的工作原理，让移动开发者从代码上了解框架。

React

React 是 facebook 出品一个前端框架，是目前最火的框架。以组件的形式组织项目结构，代替市面上的 MVC 框架。React 的出现解决了前端许多的痛点：

组件化、模块化：React 天生组件化，将页面拆分成各个组件，项目的开发效率显著提升，而且极大的降低了项目维护成本。
开发效率：React 的页面就是组件的组合，哪个组件出现问题就治哪里，一贴下药。再加上 ES6 语法使用，使得项目有超高的可读性，容易理解。
运行效率: React实现了 Virtual DOM ，高效的算法带来高效页面渲染，使得性能更优越。
可维护性：React 的组件化配合 Redux 的单向数据流，使得问题定位清晰明显。
JSX：一种语法糖，可以将 HTML 写在 JS 文件里，方便、简单。

React 更像的是 MVC 中的 View 层，Model 和 Controller 的角色则由 Redux 代替( React 跟MVC 并无关系，仅仅是为了方便理解)，单向数据流使得业务逻辑清晰明了。所以现在的
React 项目的常用体系是 React + Redux + webpack + ES6 + react-router 。我们的 Reat Native 项目使用的是 React + Redux + ES6 。

React Native

简单交代了 React 的背景，下面到了咱们的主角 —— React Native 。它可以看作是 React 的亲儿子，把全身的本领都传授了下去，儿子也挺争气，在 iOS 端跟 Android 端也有跨越性的突破。于是乎它就有了“跨平台”、“Javascript编写Native项目”史诗级的技能，他的表叔
Microsoft 对它也是疼爱有加，怕他挨 Native 欺负，给它做了一个叫CodePush 的装备，随时升级加修复，“热更新”这个标签又贴到了它的身上。现在的它是集万千宠爱于一身，要风得风，要雨得雨。我们现在就来扒一扒，看它究竟是何方神圣。

原理概述

引用React Native 从入门到原理中的一段话。

首先要明白的一点是，即使使用了 React Native，我们依然需要 UIKit 等框架，调用的是 Objective-C 代码。总之，JavaScript 只是辅助，它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系，它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。

工作流程.png

直白的说，Javascript 在上层完成逻辑处理，然后通过 Javascript 引擎，实现 Javascript 与 Objective-C 交互，调用 Objective-C 中的原生UI组件，来实现页面的渲染。

JavaScript 是一种单线程的语言，它不具备自运行的能力，因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念，实际上，它表示的是 Objective-C 创建了一个单独的线程，这个线程只用于执行 JavaScript 代码，而且 JavaScript 代码只会在这个线程中执行。

React Native初始化

在 AppDelegate的didFinishLaunchingWithOptions方法中，我们找到了RN的入口。

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"demo"
                                           initialProperties:nil
                                               launchOptions:launchOptions];

首先创建了一个根控制器的View，然后将RN创建的view添加到窗口上显示。这个方法分为两步。在initWithBundleURL:moduleProvider:launchOptions这个方法内，React Native创建了一个实现 Objective-C 与 Javascript 交互的全局bridge，后续的所有交互全部都是通过这个桥接实现的。
第二步initWithBridge:moduleName:initialProperties方法中返回了刚才的RCTRootView。

第一步初始化的核心方法是setUp。这个方法主要是创建了加载
main.jsbundle 的地址和创建了BatchedBridge。这个BatchedBridge才是真正的主角，它的主要作用就是读取 Javascript 对 Objective-C 的方法调用，而且它的内部持有一个
JavascriptExecutor 对象，用来执行 Javascript 代码。
- (void)setUp
{
...
[self createBatchedBridge];
[self.batchedBridge start];
...
}

RCTBatchedBridge

RCTBatchedBridge中最重要的就是Start方法。该方法主要包含以下几步：

读取Javascript代码
初始化需要暴露给js调用的Native模块
异步初始化 JS executor
异步初始化模块配置列表
将配置表传入JS端
调用JS代码

下面我们详细的解析下每个步骤

异步加载 JSBundle 。

  [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) {
  #ifdef RCT_DEV
     RCTDevLoadingView *loadingView = [weakSelf moduleForClass:[RCTDevLoadingView class]];
    [loadingView updateProgress:progressData];
  #endif
  }];

初始化Native模块化信息。

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

这个方法很复杂，咱们一步步来。

首先创建了2个数组跟一字典，分别存贮 module 的类、module 数据跟两者组合的键值对，这样就形成了三份配置表。

NSMutableArray<Class> *moduleClassesByID = [NSMutableArray new];
NSMutableArray<RCTModuleData *> *moduleDataByID = [NSMutableArray new];
NSMutableDictionary<NSString *, RCTModuleData *> *moduleDataByName = [NSMutableDictionary new];

遍历需要暴露给 Javascript 的类（也就是下文的 module ），将所有的 module 加入配置表中。每一个 module 在实例化的时候都会开一个自己的队列，保证每个模块内部的通信都是串行执行。感兴趣的同学们可以阅读源码，这个段写的非常好，处理了很多像“死锁”这样的多线程操作。

   for (Class moduleClass in RCTGetModuleClasses()) {
       NSString *moduleName = RCTBridgeModuleNameForClass(moduleClass);

       // Check for module name collisions
       RCTModuleData *moduleData = moduleDataByName[moduleName];

        ...

       moduleData = [[RCTModuleData alloc] initWithModuleClass:moduleClass
                                            bridge:self];
       moduleDataByName[moduleName] = moduleData;
       [moduleClassesByID addObject:moduleClass];
       [moduleDataByID addObject:moduleData];
   }

RCTRegisterModule

每个 module 都使用了RCTRegisterModule这个宏，在这个类的 load 方法的时候注册了自己的 moduleName 到 RCTModuleClasses这个数组中。这样，RN 遍历这个数组就能找到所有注册的 module 了。
在RCTBridgeModule.h这个文件中我们可以看到实现。
#define RCT_EXPORT_MODULE(js_name)
RCT_EXTERN void RCTRegisterModule(Class);
+ (NSString *)moduleName { return @#js_name; }
+ (void)load { RCTRegisterModule(self); }

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

        RCTAssert([moduleClass conformsToProtocol:@protocol(RCTBridgeModule)],
        @"%@ does not conform to the RCTBridgeModule protocol",
        moduleClass);

        // Register module
        [RCTModuleClasses addObject:moduleClass];
      }
`moduleName`方法，返回 `@#js_name`。`@# `是把宏参数

js_name 转为字符串，若字符串为空则返回的就是空。在 RCTBridgeModuleNameForClass() 获取模块名的方法里，如果 moduleName 长度为0，那么就会调用 NSStringFromClass() 方法获取类名。

Tip:@#是将传入单字符参数名转换成字符。传送门--[define宏定义的#，##，@#及符号](http://blog.csdn.net/xdsoft365/article/details/5911596)。

初始化 JavaScript 代码的执行器，即 RCTJSCExecutor 对象
上一步是module加入到配置表中，有一个非常特殊的类叫 RCTJSCExecutor ，它需要创建一个实例并保存在一个RCTModuleData的实例中并且被RCTBatchedBridge持有。
if (!_javaScriptExecutor) {
id<RCTJavaScriptExecutor> executorModule = [self.executorClass new];
RCTModuleData *moduleData = [[RCTModuleData alloc] initWithModuleInstance:executorModule
bridge:self];
moduleDataByName[moduleData.name] = moduleData;
[moduleClassesByID addObject:self.executorClass];
[moduleDataByID addObject:moduleData];
// NOTE: _javaScriptExecutor is a weak reference
_javaScriptExecutor = executorModule;
}

被持有后，初始化RCTJSCExecutor。
```
// Asynchronously initialize the JS executor
dispatch_group_async(setupJSExecutorAndModuleConfig, bridgeQueue, ^{
[performanceLogger markStartForTag:RCTPLJSCExecutorSetup];
[weakSelf setUpExecutor];
[performanceLogger markStopForTag:RCTPLJSCExecutorSetup];
});
```
前端的同学们肯定都知道js是单线程的，所有的js代码都是在一个单独的线程上调用的。
在RCTModuleClasses的setUp方法中，开了一条专门为 Javascript
运行的巴拿马运河。
- (void)executeBlockOnJavaScriptQueue:(dispatch_block_t)block
{
if ([NSThread currentThread] != _javaScriptThread) {
[self performSelector:@selector(executeBlockOnJavaScriptQueue:)
onThread:_javaScriptThread withObject:block waitUntilDone:NO];
} else {
block();
}
}

原理中的原理来了就是大家嘴中常说的“RN就是JS调OC啊”。
```
[self executeBlockOnJavaScriptQueue:^{
...
self->_context = [[RCTJavaScriptContext alloc] initWithJSContext:context onThread:self->_javaScriptThread];
[[NSNotificationCenter defaultCenter] postNotificationName:RCTJavaScriptContextCreatedNotification
                                                    object:context];
... 

__weak RCTJSCExecutor *weakSelf = self;
context[@"nativeRequireModuleConfig"] = ^NSArray *(NSString *moduleName) {
RCTJSCExecutor *strongSelf = weakSelf;
if (!strongSelf.valid) {
  return nil;
}
...
};
```
在JSThread内创建了一个JSContext，并且为Contextz设置了不同的block，如上图。这些block会集中讲一下。

生成配置表
上一步已经获得了module的数据，这个一步则将数据转成json。

- (NSString *)moduleConfig
 {
   NSMutableArray<NSArray *> *config = [NSMutableArray new];
   for (RCTModuleData *moduleData in _moduleDataByID) {
   if (self.executorClass == [RCTJSCExecutor class]) {
     [config addObject:@[moduleData.name]];
   } else {
     [config addObject:RCTNullIfNil(moduleData.config)];
   }
 }

   return RCTJSONStringify(@{
   @"remoteModuleConfig": config,
   }, NULL);
 }

将配置表传入JS端
在生成Native配置表跟初始化RCTJSCExecutor完成后，就要将配置表传入JS端了，使两端拥有同一份配置表。
```
- (void)injectJSONConfiguration:(NSString *)configJSON
               onComplete:(void (^)(NSError *))onComplete
{
  ...
[_javaScriptExecutor injectJSONText:configJSON
            asGlobalObjectNamed:@"__fbBatchedBridgeConfig"
                       callback:onComplete];
}
```
JS拥有了变量名为__fbBatchedBridgeConfig的全局变量。在JS端获得配置表后就开始执行js内部业务逻辑了。 JS 端如何使用这个配置我们下一篇会介绍。

执行 js 代码
在所有的准备工作都完成后，就开始通过executeSourceCode执行
js 代码了。

 dispatch_group_notify(initModulesAndLoadSource, bridgeQueue, ^{
   RCTBatchedBridge *strongSelf = weakSelf;
   if (sourceCode && strongSelf.loading) {
     [strongSelf executeSourceCode:sourceCode];
   }
 });

在executeSourceCode这个方法里，运行指定 url 的 js 代码。dev 模式下运行的是你的 bundleURL 下的代码，release 环境下运行的是你已经打包好的 jsbundle ，如果你使用了 codePush 对应的运行的是你 codePush 下发的 jsbundle。executeSourceCode开启了一个 NSRunLoop 不断的打印引入 native 模块中的 log 。

小结

本文一步步剖析了 ReactNative 这个伟大的框架，当然我这只是蜻蜓点水， ReactNative 还有许多值得我们学习的东西没有指出来，希望大家都去看看源码提高自己。后续，我会继续写文讲解下ReactNative如何将一个View页面展示出来和其他的一些小细节的东西。

PS

今天是2017-06-02，我们的APP已经过审，大家放心可用~