针对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没有的组件?
参考: