针对iOS平台的React Native的研究[初学者]

本文将从React Native的整体架构、通信机制、具体交互细节来深入介绍React Native在iOS平台上的工作原理。有不对之处，还望指点。

一、整体架构介绍

React提供了一套基于JS/JSX的UI库，而React Native是基于React可以生成Native控件的框架。

JS和OC之间、以及各个组件之间交互都是通过RCTEventDispatcher来传递的。 以点击为例：

1、在RCTTouchHandler模块，把参数封装后传递[RCTBridge enqueueJSCall:args:]在JSThread中执行。

具体是存储在RCTBatchedBridge的_scheduledCalls中，然后触发[RCTBatchedBridge updateJSDisplayLinkState]，由CADisplayLink的回调方法[RCTBatchedBridge_jsThreadUpdate]执行_scheduledCalls中所有操作。

2、经过处理后，会回调[RCTBathedBridge _handleBuffer],把参数buffer转成module名称、方法名和参数，并在该module所对应的queue进行回调处理。

idmethod= moduleData.methods[methodID];  @try{    [methodinvokeWithBridge:self module:moduleData.instance arguments:params];  }

3、如果要回调JS，则通过[RCTEventDispatcher sendAppEventWithName:body:]发送消息。

四、多线程的作用

1、JavascriptThread：”com.facebook.React.JavaScript”, 与RCTContextExecutor关联，JS方法的处理和调用都在该线程处理。

2、RCTBridgeQueue：”com.facebook.react.RCTBridgeQueue”，处理OC对JS提供的接口，如遍历接口、封装在moduleData中等。

3、Module Queue：每个module都有一个queue，串行执行。不过为什么要在每个module自己的queue来执行？

4、Shadow Queue: ”com.facebook.React.ShadowQueue”，主要处理RCTUIManager相关业务；

五、框架可能的问题

1、启动耗时&内存：RN是把所有js打成一个bundle，一次加载并执行，所以对启动耗时和内存都会有影响。

2、JSContext的消耗问题：看到网上有人提到JSContext消耗比较大，还需要继续研究。

六、有待研究的内容

1、CADisplayLink在RN（React Native）是如何处理业务的；

2、JS参数到Native API参数的转换；

3、扩展能力：JS如何调用RN没有的组件？

参考：

http://tadeuzagallo.com/blog/react-native-bridge/

http://blog.cnbang.net/tech/2698/