深入解析React Native的通信机制

时间：11-22 名人轶事提交错误

大家好，关于深入解析React Native的通信机制很多朋友都还不太明白，今天小编就来为大家分享关于的知识，希望对各位有所帮助！

普通的JS-OC通信非常简单。 OC有现成的接口用于向JS传输信息。例如webview提供的stringByEvaluatingJavaScriptFromString方法可以直接在当前上下文上执行JS脚本，并获取执行后的返回值。这个返回值相当于JS向OC传递信息。 React-native也是基于此。通过各种手段，可以在OC中定义模块方法。 JS可以直接调用这个模块方法，也可以无缝连接回调。

模块配置表

首先，OC需要告诉JS它有哪些模块以及模块中有哪些方法。只有JS知道了这些方法之后，才能调用这些方法。这里的实现是OC生成一个模块配置表，传给JS进行配置，该表包含了所有模块以及模块中的方法的信息，比如：

01.png

OC端和JS端分别有一个桥。两个网桥保存相同的模块配置表。当JS调用OC模块方法时，模块方法通过bridge中的配置表转换为模块ID和方法ID传递给OC。 OC通过桥接模块配置表找到对应的方法并执行。以上面的代码为例，流程大致是这样的：

02.png

在了解这个调用过程之前，我们先来看看OC的模块配置表是怎么来的。当我们创建一个新的OC模块时，JS和OC都不需要手动为新模块添加一些配置。模块配置是自动的。生成后，只要项目中有模块，这个模块就会被添加到配置表中。那么这个模块配置表示是如何生成的呢？分为以下两步：

1.获取所有模块类

每个模块类都实现RCTBridgeModule 接口。可以使用运行时接口objc_getClassList 或objc_copyClassList 检索项目中的所有类，然后一一判断是否实现了RCTBridgeModule 接口。然后你可以找到所有模块类，这些类是在RCTBridgeModuleClassByModule() 方法中实现的。

2、取出模块中暴露给JS的方法

一个模块中可以有很多方法，有的可以暴露给JS直接调用，有的则是私有的，不想暴露给JS。如何提取这些暴露的方法？我能想到的方法就是给要暴露的方法命名。制定一些规则，比如使用RCTExport作为前缀，然后使用运行时方法class_getInstaceMethod提取所有方法名，提取以RCTExport为前缀的方法。但令人作呕的是每个方法都必须有前缀。 React-native 使用另一种hack 神奇的方式来解决这个问题：编译属性attribute;

在上面的例子中，我们看到模块方法中有一个代码：RCT_EXPORT()。在模块中的方法中添加这个宏就可以暴露给JS，无需其他规则。那么这个宏有什么作用呢？我们来看看它的定义。

4.png

该宏的作用是利用编译属性attribute为二进制文件创建一个新的节，属于__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对象，该对象也会生成与模块配置表中相同的remoteModule对象。一种对应方法。在这些方法中，你可以获取自己的模块名和方法名，对callBack进行一些处理，然后传输到MessageQueue。具体实现在BatchedBridgeFactory.js的_createBridgeModule中。整个实现共24行代码。

3、在这一步中，将JS回调函数缓存在MessageQueue的一个成员变量中，并用CallbackID来表示回调。然后通过MessageQueue中保存的模块配置表将上一步传入的ModuleName和MethodName转换为ModuleID和MethodID；

4、将上述步骤中获取到的ModuleID、MethodID、callbackID等参数argus传递给OC。

5、OC接收到消息，通过模块配置表获取对应的模块和方法。

6.RCTModuleMethod处理JS传递的各个参数

7、调用OC模块方法后，执行块回调。

8. 调用步骤6 中解释的RCTModuleMethod 生成的块。

9、在块中使用CallbackID和块传递的参数来调整JS中的MessageQueue方法nvokeCallBackAndReturnFlushQueue。

10.MessageQueue通过callbackID找到对应的JS回调方法

11、调用回调方法，传递OC带的参数，完成回调。

整个流程总结为：

JS函数调用转换为ModuleID/MethodID—回调转换为CallbackID—OC根据ID获取方法—处理参数—调用OC方法—回调callbackID—JS通过callbackID获取回调执行

关于深入解析React Native的通信机制和的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。