本文主要是介绍React Native从源码解析它的实现原理及JavaScriptCore详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、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
对象
-
[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 *)reactTagviewName:(NSString *)viewNamerootTag:(__unused NSNumber *)rootTagprops:(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,3NSLog(@"%@",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,就会调用blockctx[@"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));// 创建UILabelUILabel *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];
}
这篇关于React Native从源码解析它的实现原理及JavaScriptCore详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!