React Native从源码解析它的实现原理及JavaScriptCore详解

喜欢ヅ旅行 2022-06-16 13:36 599阅读 0赞

一、React Native背景

*  有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？

### React ###

*  React 是由Facebook推出的一个JavaScript框架，主要用于前段开发。
 *  React 采用组件化方式简化Web开发
    
     *  DOM:每个HTML界面可以看做一个DOM
     *  原生的web开发方式，HTML一个文件，javaScript一个文件，文件分开，就会导致修改起来比较麻烦。
     *  可以把一组相关的HTML标签和JavaScript单独封装到一个组件类中，便于复用，方便开发。
 *  React 可以高效的绘制界面
    
     *  原生的Web,刷新界面(DOM)，需要把整个界面刷新.
     *  React只会刷新部分界面，不会整个界面刷新。
     *  因为React独创了Virtual DOM机制。Virtual DOM是一个存在于内存中的JavaScript对象，它与DOM是一一对应的关系，当界面发送变化时，React会利用DOM Diff算法，把有变化的DOM进行刷新.
 *  React是采用JSX语法，一种JS语法糖，方便快速开发。

### Native ###

*  想要了解Native是什么，需要了解下开发App有哪些开发模式，卖了一个馆子，请继续往下看。

## 二、常见的五种App开发模式 ##

*  常见的开发模式有5种（Native App,Web App,Hybrid App,Weex,React Native）

### Native App ###

*  Native App:指使用原生API开发App,比如iOS用OC语言开发
 *  优点：性能高
 *  缺点：开发维护成本高，养一个原生开发工程师需要很多钱，最重要iOS版本更新也成问题。

### Web App ###

*  Web App:指使用Html开发的移动端网页App,类似微信小程序，整个App都是网页。
 *  优点：用户不需要安装，不会占用手机内存
 *  缺点：用户体验不好，不能离线，必须联网

### Hybrid App ###

*  Hybrid App:混合开发模式，原生Api+Html共同开发，比如iOS,用html写好界面，用UIWebView展示。
 *  优点:界面复用性强，一个界面，iOS和安卓都可以使用
 *  缺点:相对于原生，性能相对有所损害

### Weex ###

*  Weex:基于Vue(JS框架)的语法开发的App,底层会自动把JS代码解析成对应平台(iOS,安卓)的原生API，本质还是原生API开发，只不过表面是用Vue开发。
 *  优点:可以做到一套代码，跨平台执行，底层会自动判断当前是哪个平台，转换为对应平台的原生API代码。
 *  缺点：开源较晚，互联网上相关资料还比较少，社区规模较小

### React Native ###

*  React Native:基于React开发的App
 *  优点：  
    \* 跨平台开发  
    \* 跳过App Store审核，远程更新代码，提高迭代频率和效率，既有Native的体验，又保留React的开发效率。
 *  缺点:对于不熟悉前端开发的人员上手比较慢，不能真正意义上做到跨平台，使用后，对app体积增加。
 *  相信大多数人了解完React Native，越来越困惑了，那不是跟Native冲突了吗，Native是用原生Api开发,但是React Native又是用React开发。
 *  要想彻底搞明白，需要了解React Native底层实现原理，又来了，想知道原理，继续往下看

## 三、React Native原理 ##

*  React Native原理其实跟Weex差不多，底层也会把React转换为原生API
 *  React Native和Weex区别在于跨平台上面，Weex只要写一套代码，React Native需要iOS,安卓都写，说明React Native底层解析原生API是分开实现的，iOS一套，安卓一套。

## 四、React Native如何把React转化为原生API ##

*  React Native会在一开始生成OC模块表，然后把这个模块表传入JS中，JS参照模块表，就能间接调用OC的代码。
    
     *  相当于买了一个机器人（OC），对应一份说明书（模块表），用户（JS）参照说明书去执行机器人的操作。

## 五、React Native是如何做到JS和OC交互 ##

*  iOS原生API有个JavaScriptCore框架，通过它就能实现JS和OC交互，想了解JavaScriptCore，请点击[JavaScriptCore][]
    
     *  1.首先写好JSX代码（React框架就是使用JSX语法）
     *  2.把JSX代码解析成javaScript代码
     *  3.OC读取JS文件
     *  4.把javaScript代码读取出来，利用JavaScriptCore执行
     *  5.javaScript代码返回一个数组，数组中会描述OC对象，OC对象的属性，OC对象所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。

JS和OC交互.png

## 六、React Native启动流程(iOS) ##

*  1.创建RCTRootView -> 设置窗口根控制器的View,把RN的View添加到窗口上显示。
 *  2.创建RCTBridge -> 桥接对象,管理JS和OC交互，做中转左右。
 *  3.创建RCTBatchedBridge -> 批量桥架对象，JS和OC交互具体实现都在这个类中。
 *  4.执行\[RCTBatchedBridge loadSource\] -> 加载JS源码
 *  5.执行\[RCTBatchedBridge initModulesWithDispatchGroup\] -> 创建OC模块表
 *  6.执行\[RCTJSCExecutor injectJSONText\] -> 往JS中插入OC模块表
 *  7.执行完JS代码，回调OC，调用OC中的组件
 *  8.完成UI渲染

React Native启动流程(iOS).png

## 七、React Native加载JS源码流程(iOS) ##

*  1.\[RCTJavaScriptLoader loadBundleAtURL\] -> 加载远程服务器中JS代码
 *  2.attemptAsynchronousLoadOfBundleAtURL(C函数) -> 开启异步加载JS代码
 *  3.\[RCTBatchedBridge executeSourceCode:sourceCode\] -> 让批量交接对象执行源代码
 *   
    
     *  真正执行JS代码的是`RCTJSCExecutor`对象
    
    1.  \[RCTJSCExecutor executeApplicationScript\] -> 交给JS执行者（RCTJSCExecutor）执行源码)
 *  5.\[postNotificationName:RCTJavaScriptDidLoadNotification\] -> 发送JS代码执行完成通知
 *  6.RCTRootView监听到RCTJavaScriptDidLoadNotification通知
 *  7.创建RCTRootContentView
 *  8.获取RCTBridge中的RCTUIManager注册RCTRootView,并且记录RCTRootView，\_viewRegistry
    
     *  `RCTUIManager`:管理UI组件
     *  \_viewRegistry：保存所有注册的View
 *  9.\[RCTRootView runApplication:bridge\] -> 通知JS运行App
 *  10.\[RCTBridge enqueueJSCall:@"AppRegistry"  
    method:@"runApplication"  
    args:@\[moduleName, appParameters\]  
    completion:NULL\] -> 通过桥接对象让JS调用AppRegistry
 *  11.\[RCTBatchedBridge \_actuallyInvokeAndProcessModule:module method:method arguments:args queue:RCTJSThread\] -> 通过批量桥架让JS执行AppRegistry方法
 *  12.\[RCTJSCExecutor \_executeJSCall:bridgeMethod arguments:@\[module, method, args\] unwrapResult:unwrapResult callback:onComplete\] -> 让JS执行者调用JS代码
 *  13.执行完JS代码，就能获取执行JS结果，是一个数组，OC需要做的事情都会保存到这个数组中
 *  14.\[RCTBatchedBridge \_processResponse:json error:error\] -> 处理执行完JS代码返回的结果对象
 *  15.\[RCTBatchedBridge handleBuffer\] -> 处理JS返回的数据，JS会返回的方法调用数组：按顺序描述需要调用哪个对象的方法，一组调用包含（module，method，arguments）
 *  16.\[self callNativeModule:\[moduleIDs\[index\] integerValue\]  
    method:\[methodIDs\[index\] integerValue\]  
    params:paramsArrays\[index\]\] -> 遍历数组，依次执行原生方法
    
     *  注意：当前方法，在遍历数组中的代码块中执行，不只是执行一次.

React Native加载JS源码流程.png

## 八、React NativeUI控件渲染流程(iOS) ##

*  1.\[RCTRootView runApplication:bridge\] -> 通知JS运行App
 *  2.\[RCTBatchedBridge \_processResponse:json error:error\] -> 处理执行完JS代码(runApplication)返回的相应，包含需要添加多少子控件的信息。
 *  3.\[RCTBatchedBridge batchDidComplete\] -> 批量桥架对象调用批量处理完成方法
 *  4.\[RCTUIManager batchDidComplete\] -> RCTUIManager调用批量处理完成的方法，就会开始去加载rootView的子控件。
 *  5.\[RCTUIManager createView:viewName:rootTag:props\] -> 通过JS执行OC代码，让UI管理者创建子控件View
    
        RCT_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTag
                      viewName:(NSString *)viewName
                      rootTag:(__unused NSNumber *)rootTag
                      props:(NSDictionary *)props)
    
     *  `RCT_EXPORT_METHOD宏`:会在JS中生成对应的OC方法，这样JS就能直接调用
     *  注意每创建一个UIView,就会创建一个RCTShadowView，与UIView一一对应
     *  `RCTShadowView`:保存对应UIView的布局和子控件,管理UIView的加载
    
     *  通过`RCT_EXPORT_METHOD宏`定义createView这个方法
 *  6.\[RCTUIManager \_layoutAndMount\] -> 布局RCTRootView和增加子控件
 *  7.\[RCTUIManager setChildren:reactTags:\] -> 给RCTRootView对应的RCTRootShadowView设置子控件
    
     *  注意：此方法也是JS调用OC方法
 *  8.\[RCTRootShadowView insertReactSubview:view atIndex:index++\] -> 遍历子控件数组，给RCTRootShadowView插入所有子控件
 *  9.\[RCTShadowView processUpdatedProperties:parentProperties:\] -> 处理保存在RCTShadowView中属性，就会去布局RCTShadowView对应UIView的所有子控件
 *  10.\[RCTView didUpdateReactSubviews\] -> 给原生View添加子控件
 *  11.完成UI渲染

React Native (UI控件渲染流程).png

## 九、React Native事件处理流程(iOS) ##

*  1.在创建RCTRootContentView的时候，内部会创建RCTTouchHandler
    
     *  并且它会作为RCTRootContentView的手势，这样点击RCTRootContentView，就会触发RCTTouchHandler
    
     *  `RCTTouchHandler`:继承UIGestureRecognizer，也就是它就是一个手势
     *  `RCTTouchHandler`:内部实现了touchBegin等触摸方法，用来处理触摸事件
 *  2.在创建RCTTouchHandler的时候，内部会创建RCTEventDispatcher
    
     *  `RCTEventDispatcher`:用来把事件处理传递给JS的方法处理，也就是当UI界面产生事件，就会执行JS的代码处理。
 *  3.通过RCTRootContentView截获点击事件
    
     *  产生事件就会去触犯RCTRootContentView中的RCTTouchHandler对象。
 *  4.当产生事件的时候,会执行\[RCTTouchHandler touchBegin\]
 *  5.RCTTouchHandler的touch方法，会执行\[RCTTouchHandler \_updateAndDispatchTouches:eventName:\]
    
     *  内部会创建RCTTouchEvent事件对象
 *  6.\[RCTEventDispatcher sendEvent:event\] -> 让事件分发对象调用发送事件对象
    
     *  内部会把事件保存到\_eventQueue（事件队列中）
 *  7.\[RCTEventDispatcher flushEventsQueue\] -> 让事件分发对象冲刷事件队列，就是获取事件队列中所有事件执行
 *  8.\[RCTEventDispatcher dispatchEvent:event\] -> 遍历事件队列，一个一个分发事件
    
     *  分发事件的本质：就是去执行JS的代码，相应事件。
 *  9.\[RCTBatchedBridge enqueueJSCall:\[\[event class\] moduleDotMethod\] args:\[event arguments\]\]; -> 让桥架对象调用JS处理事件
    
     *  本质：就是产生事件调用JS代码
 *  10.这样就能完成把UI事件交给JS代码相应

# React Native源码中JavaScriptCore详解 #

### 一、JavaScriptCore常用的类 ###

*      JavaScriptCore作用：JavaScriptCore是苹果原生API，用来JS和OC交互的。
 *  JSContext: JS运行环境，用它去执行JS代码，并且通过它去获取JS里的数据
 *  JSValue: 用于接收JS中获取的数据类型，可以是任一对象，方法。

### 二、OC调用JS ###

*  本质:JS代码中已经定义好变量和方法，通过OC去获取，并且调用
 *  步骤：
    
     *  1.创建JS运行环境
     *  2.执行JS代码
     *  3.获取JS数据(变量，方法)
     *  4.使用JS数据，方法

2.1 获取定义在JS中的变量

*  可以直接通过OC修改JS中变量的值

#pragma mark - 获取JS中定义的变量
    - (void)getJSVar
    {
        // JS代码
        NSString *jsCode = @"var arr = [1,2,3]";
        
        // 创建JS运行环境
        JSContext *ctx = [[JSContext alloc] init];
        
        // 执行JS代码
        [ctx evaluateScript:jsCode];
        
        // 因为变量直接定义在JS中，所以可以直接通过JSContext获取，根据变量名称获取，相当于字典的Key
        // 只有先执行JS代码，才能获取变量
        JSValue *jsArr = ctx[@"arr"];
        
        jsArr[0] = @5;
        
        // 打印结果：5,2,3
        NSLog(@"%@",jsArr);
    }

2.2 获取定义在JS中的方法，并且调用

*  实现OC调用JS方法

#pragma mark - OC调用JS
    // OC调用JS方法，并获取返回结果
    - (void)ocCallJSFunc
    {
        NSString *jsCode = @"function hello(say){"
        " return say; "
        "}";
        
        // 创建JS运行环境
        JSContext *ctx = [[JSContext alloc] init];
        
        // 因为方法直接定义在JS中，所以可以直接通过JSContext获取，根据方法名称获取，相当于字典的Key
        // 执行JS代码
        [ctx evaluateScript:jsCode];
        
        // 获取JS方法，只有先执行JS代码，才能获取
        JSValue *hello = ctx[@"hello"];
        
        // OC调用JS方法，获取方法返回值
        JSValue *result = [hello callWithArguments:@[@"你好"]];
        
        // 打印结果：你好
        NSLog(@"%@",result);
    }

### 三、JS调用OC中的block ###

*  本质:一开始JS中并没有OC的block，所以没法直接调用OC的block，需要把OC的block，在JS中生成方法，然后在通过JS调用。
 *  步骤：
    
     *  1.创建JS运行环境
     *  2.在JS中生成对应的OC代码
     *  3.使用JS调用，在JS环境中生成的block方法，就能调用到OC的block中.

3.1 JS调用OC中不带参数的block

*  想通过JS调用OC中不带参数的block

#pragma mark - JS调用OC中不带参数的block
    - (void)jsCallOCBlock1WithNoneArguments
    {
        // 创建JS运行环境
        JSContext *ctx = [[JSContext alloc] init];
        
        // JS调用Block方式
        // 由于JS本身没有OC这个代码，需要给JS中赋值，就会自动生成右边的代码.
        // 相当于在JS中定义一个叫eat的方法，eat的实现就是block中的实现，只要调用eat,就会调用block
        ctx[@"eat"] = ^(){
            NSLog(@"吃东西");
        };
        
        // JS执行代码，就会直接调用到block中
        NSString *jsCode = @"eat()";
        
        [ctx evaluateScript:jsCode];
    }

3.2 JS调用OC中带参数的block

*  想通过JS调用OC中带参数的block

- (void)jsCallOCBlockWithArguments
    {
        // 创建JS运行环境
        JSContext *ctx = [[JSContext alloc] init];
        
        // 2.调用带有参数的block
        // 还是一样的写法，会在JS中生成eat方法，只不过通过[JSContext currentArguments]获取JS执行方法时的参数
        ctx[@"eat"] = ^(){
            // 获取JS调用参数
            NSArray *arguments = [JSContext currentArguments];
            NSLog(@"吃%@",arguments[0]);
        };
        
        // JS执行代码,调用eat方法，并传入参数面包
        NSString *jsCode = @"eat('面包')";
        
        [ctx evaluateScript:jsCode];
    
    }

### 四、JS调用OC中的类 ###

*  本质:一开始JS中并没有OC的类，需要先在JS中生成OC的类，然后在通过JS调用。
 *  步骤
    
     *  1.OC类必须遵守JSExport协议，只要遵守JSExport协议，JS才会生成这个类
     *  2.但是还不够，类里面有属性和方法，也要在JS中生成
     *  3.JSExport本身不自带属性和方法，需要自定义一个协议，继承JSExport，在自己的协议中暴露需要在JS中用到的属性和方法
     *  4.这样自己的类只要继承自己的协议就好，JS就会自动生成类，包括自己协议中声明的属性和方法

4.1 JS调用OC自定义类

*  自定义协议(PersonJSExport)

@protocol PersonJSExport <JSExport>
    
    @property (nonatomic, strong) NSString *name;
    
    - (void)play;
    
    // 调用多个参数的方法，JS函数命名规则和OC还不一样，很可能调用不到对应的JS生成的函数，为了保证生成的JS函数和OC方法名一致，OC提供了一个宏JSExportAs，用来告诉JS应该生成什么样的函数对应OC的方法，这样就不会调错了。
    
    // PropertyName:JS函数生成的名字
    // Selector:OC方法名
    // JS就会自动生成playGame这个方法
    JSExportAs(playGame, - (void)playWithGame:(NSString *)game time:(NSString *)time);
    
    @end

*  自定义类(Person)

@interface Person : NSObject <PersonJSExport>
    
    @property (nonatomic, strong) NSString *name;
    
    
    - (void)playWithGame:(NSString *)game time:(NSString *)time;
    
    @end
    
    
    @implementation Person
    
    - (void)play
    {
        
        NSLog(@"%@玩",_name);
    }
    
    - (void)playWithGame:(NSString *)game time:(NSString *)time
    {
        NSLog(@"%@在%@玩%@",_name,time,game);
    }
    
    
    @end

*  通过JS调用OC自定义类

#pragma mark - JS调用OC自定义类
    - (void)jsCallOCCustomClass
    {
        // 创建Person对象
        Person *p = [[Person alloc] init];
        p.name = @"yz";
        
        JSContext *ctx = [[JSContext alloc] init];
        
        // 会在JS中生成Person对象，并且拥有所有值
        // 前提：Person对象必须遵守JSExport协议，
        ctx[@"person"] = p;
        
        // 执行JS代码
        // 注意：这里的person一定要跟上面声明的一样，因为生成的对象是用person引用
        // NSString *jsCode = @"person.play()";
        NSString *jsCode = @"person.playGame('德州扑克','晚上')";
        
        [ctx evaluateScript:jsCode];
    
    }

4.1 JS调用OC系统类

*  问题:系统自带的类，想要通过JS调用怎么办，我们又没办法修改系统自带类的文件
    
     *  和调用自定义类一样，也要弄个自定义协议继承JSExport，描述需要暴露哪些属性（想要把系统类的哪些属性暴露，就在自己的协议声明）
     *  通过runtime,给类添加协议
 *  自定义协议(UILabelJSExport)

@protocol UILabelJSExport <JSExport>
    
    @property (nonatomic, strong) NSString *text;
    
    @end

*  JS调用OC系统类

#pragma mark - JS调用OC系统类
    - (void)jsCallOCSystemClass
    {
        // 给系统类添加协议
        class_addProtocol([UILabel class], @protocol(UILabelJSExport));
        
        // 创建UILabel
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
        [self.view addSubview:label];
        
        JSContext *ctx = [[JSContext alloc] init];
        // 就会在JS中生成label对象，并且用laebl引用
        ctx[@"label"] = label;
        
        // 利用JS给label设置文本内容
        NSString *jsCode = @"label.text = 'Oh Year'";
        
        [ctx evaluateScript:jsCode];
    }

[JavaScriptCore]: https://www.jianshu.com/p/bd7dfd8c9917