1 热发布

网页发布 VS APP发布

网页发布：服务端上线新的网页代码，用户端通过链接直接访问。

APP发布：发布新的包装包（应用市场：上传新的包装包；应用内升级：服务端发布新的包装包），用户端下载，安装。

网页发布属于热发布，完全受控于服务端

APP发布的限制： 应用市场审核 用户端下载，安装

APP热发布的目的是实现类似于网页的发布方式，排除更新对于应用市场和用户的依赖，完全由服务端控制。

2 APP热发布的方式

2.1 H5热发布

功能完全由H5实现，APP使用WebView来加载。

优势：完全热发布

劣势：

• 性能-H5的性能相比Native差得比较多，交互体验较差。
• 缓存-H5的缓存受制于系统WebView，在无网或缓存过期情况下无法呈现界面。

2.2 数据热发布

数据由服务端控制，动态发布，APP根据数据来展现UI，实现UI有限的动态性（UI动态支持预先在APP中定义好）。

这里的数据也包括脚本数据的情况，APP通过脚本引擎执行脚本，根据结果来执行对应逻辑。

优势：数据层面热发布

劣势：不能实现UI和逻辑的完全热发布

2.3 插件化热发布

APP的独立功能作为插件，动态下载，动态运行，插件发布由服务端动态控制。

优势：功能性热发布

劣势：使用非系统公开API，有失效风险

2.4 React Native

还有一种思路，APP作为基础容器，应用功能作为脚本文件，动态下发，通过解析引擎动态执行，展现为Native UI，同时控制数据和业务逻辑。

脚本文件发布由服务端动态控制，能够实现整个APP或者部分功能完全热发布。

React Native是facebook开源的构建跨平台应用的框架，它的原理是，通过JavascriptCore引擎，解析JSX（类似XML的Javascript扩展语言）脚本代码，生成Virtual DOM，再转换为Native视图，同时通过桥接JS和Native，实现事件交互。

React Native通过Virtual DOM，以diff的方式交给Native渲染，其diff算法相当高效，能够保证良好的Native性能。这是它优于H5的地方。

优势：

• 完全热发布
• 良好的Native性能
• 跨平台复用：Andriod, iOS, H5。
• 大厂出品：持续维护性（两周一个release版本）；开放性，三方开源库支持。

劣势：

• 成熟度不够。
• 目前支持Android4.1和iOS7.0以上系统版本。

对动态性要求较高的APP，React Native提供了一种解决方案，实现类似网页的发布效果，同时保证良好的Native性能

使用React Native的APP： Facebook，QQ，QQ音乐，QQ空间（发现Tab）

此外，Weex是阿里开源的移动端跨平台开发框架，原理与React Native类似，只不过它的脚本语言换成了Vue（也是JS框架）。

3 React Native原理

3.1 React Native集成

React Native（以下简称RN）的集成参考官网： https://facebook.github.io/react-native/docs/getting-started.html

3.2 RN目录结构

• *.android.js：Android 的JS文件
• *.ios.js：iOS的JS文件
• android：Android的Native工程
• ios：iOS的Native工程
• node_modules：RN基于NodeJS的基础库。包括基本组件，以及打包脚本等等。

3.3 RN原理



Java层 Java层为应用的入口，启动C++层的JS解析器，执行JS，并通过C++传递的渲染指令，从而构建Native UI等。核心逻辑在ReactCore中完成。在UI层面，ReactCore完成了对Native视图组件的封装，它与JS层定义的组件是一一映射的。

Java层集成众多优秀开源库，图片处理使用的是Fresco，网络通信使用的是okhttp。JS层的组件会通过这些基础库来实现功能，如Image组件使用Fresco来加载远程图片，fetch组件使用okhttp来进行网络请求。

C++层 C++层主要封装了JavaScriptCore（Android和iOS通用的JS引擎），用来实现JS的解析和执行。基于JavaScriptCore，意味着JS可以使用ES6的新特性，如class、箭头操作符等。

Bridge实现Java和 JS之间的通信。

JSLoader用来加载JS文件，包括assets目录和本地文件。

JS层 主要实现UI布局和事件分发，主要有以下几个部分：

Component：JS层通JS/JSX编写的Component来构建Virtual DOM，Virtual DOM是DOM在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的UI。Component的存在让计算 DOM diff 更高效，从而使得映射到Native的视图渲染有很好的性能。

Layout：React使用css-layout，css-layout使用JS实现了flexbox ，能编译成Native代码，最终达到跨平台的展示目的。

Lifecycle&Data：React 组件通过内部的 state 变量控制生命周期及事件回调。如getInitialState方法用于定义组件初始状态，后续组件可通过 state 属性读取该状态。当调用setState 方法就修改状态值时，RN会自动调用 render 方法，重新渲染组件。

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者陈伟授权发布。