reactnative 原生组件通讯原理

http://www.csdn.net/article/2015-11-27/2826345-compare-React-Native-with-ExMobi

原生组件通讯原理

React Native经过JavaScript编写APP的方式，乍看觉得是以webview提供的现成的JS与原生语言之间的互调，可是若是当咱们调试一个React Native程序的时候，在debug视图中是不会看到任何webview被调用的痕迹。因此，实际上React Native并无使用现成的与webview的通讯方法，而是使用了更直接的JS运行环境，好比在iOS中为系统自带的JavaScriptCore。这与Phonegap这类以webview为主的界面展示与本地能力调用的模式有本质上的区别，也是确保React Native高性能和高效率的基础。

有了这个核心基础，咱们再来看看React Native是如何经过JS来挂钩到原生UI和本地能力的。

 

   

从上图很容易能够看到，开发者经过JS去调用一个React Native提供的方法，实际须要先通过两个桥接封装类，一个JS的桥接，另外一个是原生的桥接。两个桥接类之间就是经过前面提到的JS运行环境来通讯。JS桥接类的做用是将开发者的调用行为加入到React Native的模块调用队列，同时生成一个回调的ID。Native桥接类的做用是将队列里的调用行为取出来根据模块找到对应的原生UI或者本地能力的函数来执行，并将执行的结果经过回调的ID逐步传递到开发者的JS回调函数中。也就是通过这两个桥接类的相互做用，创建起了JS函数与原生能力的调用序列。