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函数与原生能力的调用序列。

reactnative 原生组件通信原理的更多相关文章

  1. 【Android实验】组件通信Intent

    实验目的 [TOC] 了解使用Intent进行组件通信原理 掌握使用Intent启动Activity的方法 熟悉和掌握Android组件间通信的方式和技巧 实验要求 设计一个主Activity和一个子 ...

  2. React-Native系列Android——Native与Javascript通信原理(一)

    React-Native最核心的是Native与Javascript之间的通信,并且是双向通信.Native层到Javascript层,Javascript层到Native层.虽说是两个方向,但实现上 ...

  3. 基于web的IM软件通信原理分析

    关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...

  4. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  5. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  6. jsbridge 原理 & 通信原理

    jsbridge 原理 & 通信原理 Hybrid 方案是基于 WebView 的,JavaScript 执行在 WebView 的 Webkit 引擎中; 因此,Hybrid 方案中 JSB ...

  7. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  8. Intent进行组件通信的一些体会

    Intent进行组件通信的原理 l  Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...

  9. 【JAVASCRIPT】React学习- 数据流(组件通信)

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...

随机推荐

  1. mybatis学习之入门实例

    测试版本 mybatis:3.2.8 数据库:mysql 项目结构 jar包准备 mybatis-3.2.8.jar mysql-connector-java-5.1.39-bin.jar junit ...

  2. IntelliJ IDEA 安装配置

    之前一直用的eclipse,以前公司的老大推荐过用这个,但是由于项目都比较赶,没及时学习. 后面这个公司的同时都用的idea,所以就换了 其实并没有那么难主要是刚刚切换时候快捷键不熟悉,打包什么的,有 ...

  3. spring 学习总结(一)

    一.spring概述 1.spring 是什么? Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于2 ...

  4. Spring_Spring的特点

    一.非侵入式编程 Spring框架的API不会再业务逻辑上出现,即业务逻辑是POJO(Plain Ordinary Java Object).由于业务逻辑中没有Spring的API,所以业务逻辑可以从 ...

  5. Oracle易忘知识点记录

    1.SQL Select语句完整的执行顺序: ①from子句组装来自不同数据源的数据: ②where子句基于指定的条件对记录行进行筛选: ③group by子句将数据划分为多个分组: ④使用聚集函数进 ...

  6. 我的Java编码规范

    1.类名采用驼峰命名法,首字母大写. 2.类变量采用驼峰命名法,首字母小写. 3.方法名是一个动词短语,首字母小写,尽量能描述清楚这个方法的意图. 4.注释在精不在多,一个好的注释要尽量描述出这段代码 ...

  7. python logging的应用

    #-*-coding:utf-8-*-#util import logging import logging from logging.handlers import RotatingFileHand ...

  8. csharp:qq weather

    using System; using System.Data; using System.Configuration; using System.Collections; using System. ...

  9. Linux下C语言操作MySQL数据库

    MySQL是Linux系统下广泛使用的开源免费数据库,是Linux应用程序数据存储的首选. Ubuntu下安装 […]

  10. Android碎笔录2——按键的点击变色和圆角实现

    android的Button默认写出来之后都是方形的直角,并且点击感很不明显,只要在drawable中加上一个xml就能解决这个问题: <?xml version="1.0" ...