React Native For Android 架构初探

版权声明：本文由王少鸣原创文章，转载请注明出处: 
文章原文连接：https://www.qcloud.com/community/article/171

来源：腾云阁 https://www.qcloud.com/community

 

Facebook 在2015.9.15发布了 React Native for Android，把JavaScript 开发技术扩展到了Android平台。React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就能够建立 基于Web，iOS 和 Android 平台的原生应用。本文将浅析Android React的架构及相关基础知识。
环境搭建及调试相关知识参考官网文档便可，本文再也不赘述。

一.React架构分析

1.层次架构：

Java层：java层为逻辑入口，启动C++层的javascript解析器，执行js经过c++传递来的渲染指令，从而构建NativeUI等。java层依赖于众多优秀开源库，在图片处理使用的是Fresco，网络通讯使用的是okhttp，固然还有众多工具类，如Json解析工具jackson，Animation知名开源库NineOldAndroids，小而全的底层工具类bolts等，在java层均封装为Module。java层核心jar包是react-native.jar，封装了众多上层的interface，如Module，Registry，bridge等，下面会以App的启用过程，完整分析java层的架构。

C++层：c++层最主要是封装了JavaScriptCore，执行对js的解析。基于JavaScriptCore，Web开发者能够尽情使用ES6的新特性，如class、箭头操做符等，并且 React Native运行在JavaScriptCore中的，彻底不存在浏览器兼容的状况。Bridge桥接了java <> js 通讯的核心接口。JSLoader主要是未来自assets目录的或本地file加载到javascriptCore，再经过JSCExectutor解析js文件。

Js层：主要处理事件分发及UI Layout，主要有如下几个部件：

• Component：Js层通js/jsx编写的Virtual Dom来构建Component或Module，Virtual DOM是DOM在内存中的一种轻量级表达方式，能够经过不一样的渲染引擎生成不一样平台下的UI。component的使用在 React 里极为重要, 由于component的存在让计算 DOM diff 更高效。
• Lifecycle&Data：React 组件经过内部的 state 变量控制生命周期及事件回调。如getInitialState方法用于定义组件初始状态，后续组件可经过 this.state 属性读取该状态。当事件触发（或者主动调用setState方法更新数据）致使状态变化，this.setState 方法就修改状态值，每次修改之后，自动调用 this.render 方法，从新渲染组件。
• Layout：React使用css-layout，css-layout使用javascript实现了flexbox ，不依赖于DOM，能编译成Object-C或者Java，最终达到跨平台的展现目的，但暂时不支持css3，暂时只能支持简单的布局和普通的动画。

2.Js与Java通讯机制：

在Java层与Js层的bridge分别存有相同一份模块配置表，Java与Js互相通讯时，经过bridge里的配置表将所调用模块方法转为{moduleID,methodID,args}的形式传递给处理层，处理层经过bridge的模块配置表找到对应的方法执行，若是有callback，则回传给调用层。在了解ReactAndroid APP启动后，第三部分会详细讲这套机制。

二.从应用启动到页面加载完成分析

上图为 Android React 加载过程的解析，下面先概要描述上层核心类及原理，再梳理核心的启用步骤。
Core Class：
1.ReactInstanceManager：主要是用来建立及管理Catalyst的实例的上层接口，控制开发调试，生命周期与ReactRootView所在activity保持一致。

2.ReactRootView：为启动入口核心类，负责监听及分发事件并从新渲染元素，App启动后，其将做为App的root view。

3.CatalystInstance：顶级异步JSCAPI封装类，提供Java与Js互通的环境，经过ReactBridge将Svr的Js Bundle传送到Js引擎。

4.NativeModuleRegistry：Java层模块注册表，即暴露给Js的API集合。

5.JavascriptModuleRegistry：Js层模块注册表，负责将全部JavaScriptModule注册到CatalystInstance，经过Java动态代理调用到Js。

6.CoreModulePackage：定义核心框架模块，建立NativeModules&JsModules。

启动过程的解析：

1.在ReactInstanceManager时会配置应用所需的java模块与js模块以后，经过ReactRootView的startReactApplication启动APP。

2.在建立ReactInstanceManager同时会建立用于加载JsBundle的JSBundlerLoader，并传递给CatalystInstance。

3.CatalystInstance会建立Java模块注册表及Javascript模块注册表，并遍历实例化模块。

4.CatalystInstance经过JSBundlerLoader向Node Svr请求Js Bundle，并传递给JSCJavaScriptExectutor，最后传递给javascriptCore，再经过ReactBridge通知ReactRootView完成渲染。

三.Js与Java通讯机制

Java与Js之间的调用，是以两边存在两边存在同一份模块配置表，最终均是将调用转化为{moduleID, methodID，callbackID，args}，处理端在模块配置表里查找注册的模块与方法并调用。
Java -> Js ：Java经过注册表调用到CatalystInstance实例，透过ReactBridge的jni，调用到Onload.cpp中的callFunction，最后经过javascriptCore，调用BatchedBridge.js，根据参数｛moduleID,methodID｝require相应Js模块执行。详细流程以下图。

Js -> Java：JS不主动传递数据调用Java。在须要调用调Java模块方法时，会把参数｛moduleID,methodID｝等数据存在MessageQueue中，等待Java的事件触发，再把MessageQueue中的｛moduleID,methodID｝返回给Java，再根据模块注册表找到相应模块处理。详细流程以下图。

四.总结

React将UI分解成组件，废弃了模板，统一视图逻辑标签，使构建的视图更容易扩展和维护，Vitual Dom更是其提升性能的亮点，React 中的Dom并不保证立刻影响真实的Dom，React会等到事件循环结束，利用diff算法，经过当前新Dom树与以前的Dom树做比较，计算出最小的步骤更新真实的DOM。 Android React的推出更使得利用相同的核心代码就能够建立 Web，iOS 和 Android 平台的原生应用，但目前Android React的HelloWorld基础库将近7m，落地项目仍须要精简，目前咱们正在精简中。固然，对于Andriod版本也有考验，仅支持 Android 4.1 (API 16) 以上的版本（iOS 7.0），固然，在系统不支持状况下，H5能够做为后备方案。 咱们后续会持续关注Android React的动态，向你们继续推送更多关于Android React的文章。（底部有关于Android React全部类库的描述）