思维导图-React Native通信原理

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/