React Native--移动端开发的救星
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域
我作为一个搞了N年开发的人员,让我重新去搞原生的Android和IOS那简直是要我的老命了,但是自从我发现了此框架之后便一发不可收拾,我发现,我可以不用过多的学习就可以开发出想要的APP。
React Native使用的是Javascript语法,开发人员可以React的框架上开发,而且仅需学习一次,就可以编写任何平台。
下面是 React Native的原理:
RN_整体框架图.png
层次架构:
Java层:该层主要提供了Android的UI渲染器UIManager(将JavaScript映射成Android Widget)以及一些其他的功能组件(例如:Fresco、Okhttp)等,在java层均封装为Module,java层核心jar包是react-native.jar,封装了众多上层的interface,如Module,Registry,bridge等。
C++层:主要处理Java与JavaScript的通信以及执行JavaScript代码工作,该层封装了JavaScriptCore,执行对js的解析。基于JavaScriptCore,Web开发者可以尽情使用ES6的新特性,如class、箭头操作符等,而且 React Native运行在JavaScriptCore中的,完全不存在浏览器兼容的情况。Bridge桥接了java , js 通信的核心接口。JSLoader主要是将来自assets目录的或本地file加载javascriptCore,再通过JSCExectutor解析js文件。
Js层:该层提供了各种供开发者使用的组件以及一些工具库。
Component:Js层通js/jsx编写的Virtual Dom来构建Component或Module,Virtual DOM是DOM在内存中的一种轻量级表达方式,可以通过不同的渲染引擎生成不同平台下的UI。component的使用在 React 里极为重要, 因为component的存在让计算 DOM diff 更高效。
ReactReconciler : 用于管理顶层组件或子组件的挂载、卸载、重绘。
注:JSCore,即JavaScriptCore,JS解析的核心部分,IOS使用的是内置的JavaScriptCore,Androis上使用的是 https://webkit.org 家的jsc.so。
Java层核心类及原理,如下所示:
ReactContext
ReactContext继承于ContextWrapper,是ReactNative应用的上下文,通过getContext()去获得,通过它可以访问ReactNative核心类的实现。
ReactInstanceManager
ReactInstanceManager是ReactNative应用总的管理类,创建ReactContext、CatalystInstance等类,解析ReactPackage生成映射表,并且配合ReactRootView管理View的创建与生命周期等功能。
ReactRootView
为启动入口核心类,负责监听及分发事件并重新渲染元素,App启动后,其将作为App的root view。
CatalystInstance
CatalystInstance是ReactNative应用Java层、C++层、JS层通信总管理类,总管Java层、JS层核心Module映射表与回调,三端通信的入口与桥梁。
JavaScriptModule
JavaScriptModule是JS Module,负责JS到Java的映射调用格式声明,由CatalystInstance统一管理。
NativeModule
NativeModule是ava Module,负责Java到Js的映射调用格式声明,由CatalystInstance统一管理。
JavascriptModuleRegistry
JS Module映射表,负责将所有JavaScriptModule注册到CatalystInstance,通过Java动态代理调用到Js。
NativeModuleRegistry
是Java Module映射表,即暴露给Js的API集合。
CoreModulePackage
定义核心框架模块,创建NativeModules&JsModules。
启动过程的解析:
1.ReactInstanceManager创建时会配置应用所需的java模块与js模块,通过ReactRootView的startReactApplication启动APP。
2.在创建ReactInstanceManager同时会创建用于加载JsBundle的JSBundlerLoader,并传递给CatalystInstance。
3.CatalystInstance会创建Java模块注册表及Javascript模块注册表,并遍历实例化模块。
4.CatalystInstance通过JSBundlerLoader向Node Server请求Js
Bundle,并传递给JSCJavaScriptExectutor,最后传递给javascriptCore,再通过ReactBridge通知ReactRootView完成渲染。
Js与Java通信机制
Java与Js之间的调用,是以两边存在两边存在同一份模块配置表,最终均是将调用转化为{moduleID,
methodID,callbackID,args},处理端在模块配置表里查找注册的模块与方法并调用。
1. Java 调用Js
Java通过注册表调用到CatalystInstance实例,透过ReactBridge的jni,调用到Onload.cpp中的callFunction,最后通过javascriptCore,调用BatchedBridge.js,根据参数{moduleID,methodID}require相应Js模块执行。流程如下图:
rn_java调用js.png
1. Js 调用Java
如果消息队列中有等待Java 处理的逻辑,而且 Java 超过 5ms 都没有来取走,那么 JavaScript 就会主动调用 Java 的方法,在需要调用调Java模块方法时,会把参数{moduleID,methodID}等数据存在MessageQueue中,等待Java的事件触发,把MessageQueue中的{moduleID,methodID}返回给Java,再根据模块注册表找到相应模块处理。流程如下图:
rn_js调用java.png
作者:karlsu
链接:https://www.jianshu.com/p/038975d7f22d
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
React Native--移动端开发的救星相关推荐
- React Native三端融合在沪江的应用实践
内容来源:2017年3月11日,沪江web前端开发工程师陈达孚在"中生代技术&iTechPlus年度大会(上海)"进行<基于react native三端融合的应用和实 ...
- React Native 三端同构实战
WeiboGoogle+用电子邮件发送本页面 0 React Native 三端(Web.iOS.Android)同构是指在不改动原 React Native 的代码下,让其在浏览器中运行出和在 Re ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- react native Android端保持APP后台运行--封装 Headless JS
react native Android端保持APP后台运行--封装 Headless JS 前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iO ...
- React Native三端同构
React Native三端同构,即iOS.Android.Web共用一套代码,已知React Native已经支持iOS.Android,所以只需要做支持Web的工作就行了. 如何同构 我们可以利用 ...
- React Native 三端同构实践
⚠️ 博客中涉及的代码内容可查看 Github: react-native-isomorphism React Native三端同构皆在
- React Native微信支付开发爬坑之旅
早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低.所以有必要做下总结,日后再有微信支 ...
- 在ubuntu 14.04搭建React Native for Android开发环境
安装jdk8, 因为android studio 2.x版本需要运行在jdk8环境. 安装nodejs 安装React Native CLI npm install -g react-native-c ...
- 先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...
导语 内容提要 本书作者Nader Dabit是AWS Mobile开发人员.React Native Training创始人和React Native Radio播客主持人.本书旨在帮助iOS.An ...
- React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
最新文章
- mysql5.5 二进制安装
- 下一代Asp.net开发规范OWIN(2)—— Katana介绍以及使用
- 送给 Java 程序员的 Spring 学习指南
- MYSQL多表查询与事务
- 实现Datagrid分页
- windows笔记-内核对象
- Linux free 命令详解
- 使用 Spring 2.5 注释驱动的 IoC 功能
- Windows命令行提取日期时间
- 写出python的基本语法规则_【Python基础】python基本语法规则有哪些-赵小刀的回答...
- google chrome 浏览器 必备插件
- python视频培训班
- html页面中的路径问题(相对路径和绝对路径)
- java算法合集-九阳神功第三式滑动窗口
- 基金大数据分析及基金投资建议(Python与Excel实现)
- 被final修饰的部分变量后依然可以被修改
- CAS TGT 校验不成功:No principal was found in the response from the CAS server.WHO: audit:unknown
- Unity丛林战争学习02_TCP_解决分包和黏包的问题
- ppt中的图片批量保存的方法(及像素分辨率换算)
- 多行显示和单行显示溢出部分为...