React Native IOS集成与原理简析

自从facebook开源了react native之后,许多关于react native实现机制和原理的文章层出不穷,但是大部分主要是从native的角度去写,本文以一个web开发者ios初学者的角度去看react native在ios平台上实现的原理,如有不对之处还望指点。

一,整体流程


首先,明确一点的是React Native是基于react的,react.js提供了一套组件化机制来让我们写基于dom的react组件,而React Native是基于react组件的基础上提供了一个native的react组件,可以看做js->react.js->react native->native这个过程。

然后是生成native的大致流程,先看一张大致的流程图



1 首先,我们在写react native时,默认的入口就是index.ios.js,无论我们怎么分文件夹,项目根目录下的js文件都会被打包一份jsbundle文件,只是index.ios.js调用的是主程序的入口即AppRegistry注册的入口。

2 前面说到了打包,对于前端构建来说,就是利用node处理文件合并压缩等等,跟前端使用的一些打包工具例如grunt webpack不同的是,react native自己实现了一个打包方式packger,但是实现的效果都是一样的,另外网上已经有了webpack打包react native的

3 打包之后,我们的js代码包括react native的js源码都被打包压缩成了一个.jsbundle文件,我们在index.ios.js里面可以写es6的语法,这些都会在打包的时候去编译解析,生成这个jsbundle文件里面的代码是基于commonJS规范的,便于javascriptcore解析。

4 javascriptcore是oc的一个能够解析js的库,这个在ios7以上才能支持,不过react native对于ios7以下也有兼容,就是利用UIWebView去实现通信,这个机制可以参考jsapi的实现机制。下图是两个javascriptexcutor的封装实现。


5 能够解析javascript之后,就可以按照约定渲染出相应的native 的uikit组件了。


二,通信机制


 
那么,究竟javascript和native是怎么通信和交互的呢?

我们可以简单写一个native modules来举例,在oc定义一个person类,提供一个person的fetchName方法供js调用,js端使用person.fetchName()获得结果。

oc代码:Person.m


1
2
3
4
5
6
7
8
9
10
11
12
@implementation Person
RCT_EXPORT_MODULE();


RCT_EXPORT_METHOD(fetchName:(RCTResponseSenderBlock)callback) {

<span class="built_in" style="font-weight: bold;">NSString</span> *name = @<span class="string" style="color: #880000;">"hello"</span>;

callback(@[name]);

}
@end


js代码:

1
2
3
4
var rutil = React.NativeModules.Person;
rutil.fetchName(function(name){
console.log(name);
});


当我在js代码执行fetchName方法时,过程大概是这样的



1 首先native这边会主要有两个线程来处理这些操作,主线程用来负责uikit的渲染和oc逻辑方法的执行,javascript线程用来负责执行js代码。

2 图上的modulesConfig也就是模块配置表,包含了moduleID和methodID键值对的集合,这份配置表在会在程序初始化过程中,由oc遍历所有标识为接口的方法即(RCT_EXPORT),由这些方法生成对应的moduleID和methodID并打包到modules中,形成一个config dictionary,最终转换成json格式注入(injectJSONConfiguration)到js的执行上下文中。

3 图中执行和解析js代码的是RCTJavascriptExecutor这时一个javascriptCore的实现,他是用来执行我们的js代码。

4 当js代码需要调用fetchName方法时,就可以通过配置表找到对应的oc方法,这时请求并没有立即去执行,而是放入到native call queue队列当中,当js代码执行完之后,oc这边会去遍历这个native call queue并找个它对应person.m里面定义的方法并执行,执行完成之后将执行结果和callback放入native call queue,接着js会去native call queue按照当时放进去的的id找到结果和callback,然后在通过enqueueJSCall执行js的代码callback来完成回调。

5 oc端有专门的对参数进行转换的操作,来完成oc和javascript之间的数据类型转换。

6 关于js模块配置表调用oc方法其实是利用oc的反射机制来实现的,简单来说就是,oc提供了方法名称的字符串,在调用时,直接传一个字符串就能运行这个字符串代表的方法。

 

三,react natvie集成到ios时踩过的坑


1 将一个现有的ios项目添加react native支持时,有以下几个关键步骤:

1)在项目里新建一个group,然后在node_modules下面找到React和Libraries两个文件夹,将这两个文件夹下的.xcodeproj文件引入到我们创建的group中。

2)找到项目的build settings配置,在Header Search Paths下面新增一个地址,定位到node_modules/react-native/React目录下,选择递归(recursive)。

3)找到项目的build phases配置,找到Link Binary With Libraries,将步骤1里面的.a文件全部引入即可完成配置。

2 在引入reactRootView时,官网的代码里是少了一个参数,即initialProperties参数,我们要在自己的代码里添加这个参数,传nil即可。

react native内置的api毕竟还不能满足所有的需求,有时也会自己写一些接口来供js调用,下面列举一些需要注意的点:

3 由于oc是多线程(GCD)的,上文也说到在执行javascript时是在javascript的线程中进行的,所以在写接口时,如果需要调用非javascript线程的逻辑,就需要在主线程进行,即在业务代码前获取到主线程即:

 
1
2
3
dispatch_async(dispatch_get_main_queue(),^ {
[nav pushViewController:cg animated:YES];
});


 

4 在自定义接口时,我们在oc端定义的方法时,如果有参数,那么js端一定要传这个参数,如果没有定义参数,js端也不能传参数,这可能和js以往的语法不太一样,即使定义的一个方法,我传不传都不会报错,但是在oc是不行的,必须严格按照定义方法时的格式来传递。


四,总结


 
1 react native实现的机制确实比较新颖,在设计模式和实现方法上有很多可以学习的地方。

2 react native在渲染过程中,利用javascriptcore去执行js代码,并渲染出native组件,这个过程毕竟还是有很大的工作量的,对性能消耗也不小,设想一下,加入js解析如果能提前做好放在内存中,渲染时直接运行native的代码或许对性能和速度都有一定提升。
豫ICP备19009686号
吕小鸣的前端博客正在使用PWA,是否安装到桌面?x
吕小鸣的前端博客正在使用PWA,是否安装到桌面?x