React Native通信机制详解

最近在捣鼓跨平台开发,最终选择使用React Native.这对于不太了解前端的原生开发者来说,坑还是挺多的.
今天我们来了解下RN的通信机制

react-native用iOS自带的JavaScriptCore作为JS的解析引擎,但并没有用到JavaScriptCore提供的一些可以让JS与OC互调的特性,而是实现了一套机制,这套机制可以通用在所有的JS引擎上,在没有JavaScriptCore的情况下,也可以用webview代替,实际上项目汇总已经有用webview作为引擎的实现,应该是用于兼容ios7以下没有JavaScriptCore的版本

普通的JS-OC通信很简单,OC向JS传信息有现成的接口,比如webview提供的stringByEvaluatingJavaScriptFromString方法可以直接在当前的context上执行一段JS脚本,并且可以获取执行后的返回值,这个返回值就相当于JS向OC传递信息.react-native也是以此为基础,通过各种手段,实现了在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调

模块配置表

首先OC要 告诉JS她有什么模块,模块里面有什么方法,JS才知道有这些方法后才有可能去调用这些方法,这里的实现是OC生成一分模块配置表传给JS,配置表里包括了所有模块和模块里方法的信息,例如:

01.png

OC端和JS端分别有一个bridge,两个bridge都保存了同样一份模块配置表,JS调用OC模块方法时,通过bridge里的配置表把模块方法转为模块ID和方法ID传给OC,OC通过bridge的模块配置表找到对应的方法执行之,以上述代码为例,流程大致是这样:

02.png
在了解这个调用流程之前,我们先来看看OC的模块配置表是怎么来的,我们在新建一个OC模块时,JS和OC都不需要为新的模块去手动添加一些配置,模块配置是自动生成的,只要项目中有一个模块,就会把这个模块添加到配置表里,那这个模块配置表示怎样生成的呢?分以下两个步骤:
1,取所有模块类

每个模块类都实现了RCTBridgeModule接口,可以通过runtime接口objc_getClassList或者objc_copyClassList取出项目里所有类,然后逐个判断是否实现了RCTBridgeModule接口,就可以找到所有模块类,实现在RCTBridgeModuleClassByModule()方法里.
2,取出模块里暴露给JS的方法

一个模块里可以有很多方法,一些是可以暴露给JS直接调用的,一些是私有的不想暴露给JS的,怎样做到提取这些暴露的方法呢?我能想到的方法是对要暴露的方法名制定一些规则,比如用RCTExport作为前缀,然后用runtime方法class_getInstaceMethod取出所有方法名字,提取以RCTExport为前缀的方法,但是这样做恶心的地方就是每个方法必须加前缀,react-native用了另一个黑魔法似的方法解决这个问题:编译属性attribute;
在上述例子中我们看到模块方法里有句代码:RCT_EXPORT(),模块里的方法加上这个宏就可以实现暴露给JS,无需其他规则,那这个宏做了什么呢?来看看他的定义:

4.png
这个宏的作用是用编译属性attribute给二进制文件新建一个section，属于__DATA数据段，名字为RCTExport，并在这个段里加入当前方法名。编译器在编译时会找到attribute进行处理，为生成的可执行文件加入相应的内容。效果可以从linkmap看出来：
5.png
可以看到可执行文件数据段多了个RCTExport段,内容就是各个要暴露给JS的方法,这些内容是可以在运行时获取到的,在RCTBridge的RCTExportMethodByModuleID()方法里获取这些内容,提取每个方法的类名和方法名,就完成了提取模块里暴露给JS方法的工作.
整个模块类/方法提取实现在RCTRemoteModulesConfig()方法里

调用流程

接下来看看JS调用OC模块方法的详细流程,包括callBack回调,这时需要细化一下上述的调用流程图:

03.png

看起来有点复杂,从发起调用到执行回调总共11个步骤,下面来说明下:
1,JS端调用某个OC模块暴露出来的方法
2,把上一步的调用分解为ModuleName,MethodName,arguments,扔给MessageQueue处理.在初始化时模块配置表上的每一个模块都生成了对应的remoteModule对象,对象里也生成了跟模块配置表里一一对应的方法,这些方法里可以拿到自身的模块名,方法名,并对callBack进行一些处理,再移交给MessageQueue,具体实现在BatchedBridgeFactory.js的_createBridgeModule里.整个实现24行代码.
3,在这一步把JS的callback函数缓存在MessageQueue的一个成员变量里,用CallbackID代表callback.再通过保存在MessageQueue的模块配置表把上一步传进来的ModuleName和MethodName转为ModuleID和MethodID;
4,把上述步骤得到的ModuleID,MethodID,callbackID和其他参数argus传给OC.
5,OC接受到消息,通过模块配置表拿到对应的模块和方法
6,RCTModuleMethod对JS传过来的每一个参数进行处理
7,OC模块方法调用完毕,执行block回调
8,调用到第六步说明的RCTModuleMethod生成的block
9,block里带着CallbackID和block传过来的参数去调JS里MessageQueue的方法nvokeCallBackAndReturnFlushQueue
10,MessageQueue通过callbackID找到对应的JScallback方法
11,调用callback方法,并把OC带过来的参数一起传递过去,完成回调
整个流程概括为:
JS函数调用转ModuleID/MethodID—>callback转CallbackID—>OC根据ID拿到方法—>处理参数—>调用OC方法—>回调callbackID—>JS通过callbackID拿到callback执行

事件响应

上述第四步有一个问题:JS是怎样把数据传给OC,让OC去调用相应方法?
答案是通过返回值:JS不会主动传递数据给OC,在调用OC方法时,会在上述第四步把ModuleID,MethodID等数据加到一个队列里,等OC过来调JS的任意方法时,再把这个队列放回给OC,此时OC在执行这个队列里要调用的方法

总结

整个React Native的JS-OC通信机制大致就是这样了，关键点在于：模块化，模块配置表，传递ID，封装调用，事件响应，其设计思想和实现方法很值得学习借鉴。