React Native通信原理.png
原理
原生端和JS端都保存了一份模块配置表，里面标记了所有原生暴露的模块和方法。
-
实例
1A8A13D4-E61B-44E5-A33C-FA2990276B5F.png
JS调用原生模块方法时，通过模块配置表把请求分解为模块ID、方法ID和参数传给原生，原生通过模块配置表找到对应的方法并执行
React Native结构
286D5081-903E-4564-9A5F-109189CD9C64.png
React Native启动流程
39649440-586D-481D-9708-90CD5FBBE88A.png
创建RCTBridge
- 桥接对象,管理JS和OC交互，它内部持有一个RCTBatchBridge对象
创建RCTBatchBridge
- JS和OC交互主要是由它实现的
执行[RCTBatchedBridge loadSource]
- 加载JS源码
执行[RCTBatchedBridge initModulesWithDispatchGroup]
- 创建模块配置表
执行[RCTJSCExecutor injectJSONText]
- 往js中注入模块配置表
执行完JS代码，回调OC，调用OC中的组件
实现过程
原生向js端发消息
-
RCTEventDispatcher
- 通过RCTJSExecutor，主动发起调用了JS
原生端生成模块配置表
-
使用RCT_EXPORT_MODULE宏注册要暴露的类
-
宏定义
A321DE3C-03D1-4B70-A990-D75AA22D90DD.png
-
RCT_EXPORT_MODULE宏中，app运行时调用load方法，注册自己
-
把宏展开后的类
45B5D309-A638-4A9C-B571-1DC9308ED224.png
-
-
-
使用RCT_EXPORT_METHOD宏注册方法
-
宏定义
A5EDE7B5-7DEA-4263-9C40-5A678DB7BCB8.png
-
该宏返回一个数组，里面包含方法内容
-
实例
0C596D90-B24F-44F1-9817-69F3DFD56784.png
-
把宏展开后的方法
961D10E6-0CA0-465A-BE68-50AD6388A144.png
-
-
-
全局单例数组RCTModuleClasses保存了所有的原生类信息
21AA6845-CB76-442C-B703-8BC6AC093E6B.png
-
从RCTModuleClasses生成三个配置表，保存所有的原生模块信息，便于后续查找
6C216003-4F3E-4AB6-8C69-1D213AC3D81D.png
- moduleClassesByID数组表，存储原生类的class
- moduleDataByID数组表，保存由原生类生成的RCTModuleData对象
- moduleDataByName字典表，以+methodName方法的返回值为key，保存由原生类生成的RCTModuleData对象
- RCTModuleData保存类moduleClass、name、methods、instance、confige
-
生成moduleConfig
- 从moduleDataByName表中，取出所有项，放到一个数组中。
模块配置表传到js端
AC697F9A-E79F-4E5A-B713-46EC7B119C4E.png
-
将moduleConfig配置信息，通过RCTJSExecutor，注入到JS环境JSContext里
-
在JS的global全局变量里面加入一个__fbBatchedBridgeConfig对象，是一个数组，里面记录着所有原生模块信息
js端调用原生模块
-
在模块配置表内，找到js请求中的ModuleID、MethodID、arguments
91A3C0C8-81B0-40C2-A8B8-28B5B6D11A6C.png
-
js端把方法回调存入callback数组中，原生端执行完毕，调用此回调
E405E7D2-A805-4655-A3F1-E7A1CF5FFDD7.png
-
把js请求放到MessageQueue中，等待原生调用
E7246B93-F454-46DB-ACD6-7A8573C3EF89.png
- 间隔5毫秒后才能调用
CC0F2791-86CA-40BC-9E94-180C0842E2A4.png
-
原生收到消息，通过模块配置表，找到对应的模块和方法，调用执行
-
js一次性传来多条消息，分别识别出每一条消息的module信息
-
查找到对应的模块、方法，执行
-
B316460A-4E05-4E7D-8B8D-D15DC668770C.png
-
43D08E94-E58D-4E7E-B661-ED0E33326F13.png
- 原生方法执行完毕，再主动调用js，js端通过callbackId，找到对应callback调用
js调用原生UI组件
-
原生UI组件注册
-
原生UI组件继承自RCTViewManager
-
RCTViewManager是上面的一个原生模块，作为基类暴露公用属性如backgroundColor、opacity、shadowColor等
-
子类可以添加自定义的属性，供js调用
-
-
RCT_EXPORT_VIEW_PROPERTY
-
宏定义
887B22C6-7485-4061-971F-69E6363D00EF.png
-
-
RCTUIManager是上面的一个原生模块，它管理着所有的原生UI组件的生成、更新
-
RCTUIManager初始化
- 从模块配置表中，循环查找其中继承自RCTViewManager的对象，放到_viewManagers字典和_viewConfigs数组中，key是viewName
-
-
RCTRootView
-
js环境加载完成后，创建subview RCTContentRootView
-
RCTContentRootView通过allocateRootTag方法创建了root得reactTag，规则是从1开始，每次累加10
-
-
63E57B57-ACE6-40C9-8E71-1E13FD53A442.png
- 把reactTag放到RCTUIManager的_viewRegistry字典中，key为reactTag
- 通知js开始绘制页面
-
C4D37E32-FBE8-41C0-9ABB-5269A69E94F3.png
-
RCTUIManager
-
对js暴露的方法
-
createView
- 创建各种原生View，并且把传过来的JS的属性参数一一赋值
-
updateView
- JS通知原生View来更新对应的属性、样式变化
-
......
-
-
js操纵原生view的实现过程
-
从js端传来reactTag、viewName、props
-
以createView为例
0A075817-0BA1-400D-95A4-3479D96E2551.png
-
-
通过viewName，在_viewManagers中找到对应的原生view data
-
创建原生view，指定它的tag为reactTag，方便后续查找
-
通过props，给原生view赋值
-
通过propConfig判断是否注册过该属性
-
如果已注册，则通过运行时invocation的方式，生成了一个block函数，每次调用这个block，就会以运行时的方式，setter给对应属性
-
-
-
AA735048-5774-4495-A1C3-C0EA3BD177D2.png
参考资料：
http://blog.cnbang.net/tech/2698/
http://taobaofed.org/blog/2015/12/30/the-communication-scheme-of-react-native-in-ios/
http://awhisper.github.io/2016/07/02/ReactNative%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%902/
网友评论