了解Hybird和小程序和react-native的技术架构

1. Hybrid App

1.1 Hybrid app的优势

Hybrid app是介于native和web之间的一种混合app，它既有native良好的用户体验和兼容性特点，又具有web跨平台和快速开发迭代的特点。

可以对比下三种app 在开发成本，用户体验，迭代速度等方面的表现：

	web	Hybrid	native
开发成本	低	较低	高
用户体验	差	较优	优
迭代速度	快速	快速	较慢
安装	不需要	需要	需要
跨平台	支持	怼支持	不支持

1.2 Hybrid app的技术原理

Hybrid app的技术原理就是在native中通过webview加载h5页面，h5页面可以调用移动端原生功能，而native可以获取h5页面的运行状态，所以Hybrid app的技术关键点在于native和web的双向通信机制的设计。最常用的方案就是jsbridge。JSbridge的原理，jsbridge.

2. react-native

2.1 RN的出现背景

facebook发现了Hybird的很多缺陷和不足，于是提出了另一套app方案，也就是rn。那Hybrid到底有什么不足呢？首先Hybrid是基于webview的，在 Android 上的性能缺陷非常明显；其次Hybrid需要原生开发维护jsbridge，适用于一个企业的jsbridge从无到有需要比较长的周期去摸索，成本较高；再者Hybrid的调试需要前端开发和原生开发共同完成，非常麻烦。

2.2 RN的技术原理

不同于Hybrid的webview UI方案，RN实际上基于 Native UI 的方案，它在赋予 H5 原生API能力的基础上，进一步通过 JSBridge 将js解析成的虚拟节点树传递到 Native 并使用 原生渲染 。

JavaScriptCore + ReactJS + Bridges 就成了React Native。

• JavaScriptCore负责JS代码解释执行
• ReactJS负责描述和管理VirtualDom,指挥原生组件进行绘制和更新，同时很多计算逻辑也在js里面进行。ReactJS自身是不直接绘制UI的，UI绘制是非常耗时的操作，原生组件最擅长这事情。
• Bridges用来翻译ReactJS的绘制指令给原生组件进行绘制，同时把原生组件接收到的用户事件反馈给ReactJS。

总结下就是：
在React Native 框架中，JSX 源码通过 React Native 框架编译后，通过对应平台的 Bridge 实现了与原生框架的通信。如果在程序中调用 React Native 提供的 API，那么 React Native 框架就通过 Bridge 调用原生框架中的方法。 而程序中的UI, 就映射为虚拟 DOM 后进行 diff 算法，diff 算法计算出变动后的 JSON 映射文件，最终由 Native 层将此 JSON 文件映射渲染到原生 App 的页面元素上，最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与 Android 平台的 UI 变更。
编写的 React Native代码最终会打包生成一个 main.bundle.js 文件供 App 加载，此文件可以在 App 设备本地，也可以存放于服务器上供 App 下载更新，后续章节讲解的热更新就会涉及到 main.bundle.js 位置的设置问题。

2.3 RN的缺点

• 系统仍然（不得不）依赖原生组件暴露出来的组件和方法，并且大量组件是iOS only的，这样，用户必须在不同的平台下写两套代码，而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。
• React Native仍然很不完善
• 很多坑

尽管RN有很多缺点，但是facebook利用avaScriptCore的几个接口以及一个React来颠覆整个native开发所做的精妙设计和封装仍然非常厉害！！！

3. 小程序

小程序是通过更加定制化的 JSBridge，并使用 双线程 的模式隔离了JS逻辑与UI渲染，形成了特殊的开发模式，提高了页面性能及开发体验。

因为之前做小程序的时候，有看到过一篇非常非常好的介绍小程序架构的文章，所以这里就不在具体展开了，大家可以参考下浅谈小程序运行机制

4. native, h5, RN(Hybrid)的优缺点和应用场景

native的优点：可以访问设备中的所有功能，运行速度更快，性能更高，而且可以启用优秀的离线处理和存储能力等，提供最佳的用户体验。
native的缺点：开发成本高，不同平台需要定制不同的app，通用性差；上线时间不稳定，需要审核；版本控制能力差，版本发布到达率无法控制，多个版本更新发布，修复bug，无法保证及时送达到用户手中。
native的应用场景：
对APP各方面性能、响应要求高

h5优点： 直接在网页上调试和修改，几乎不用考虑用户机型和适配的问题；版本升级优势，网页的升级与用户无关，用户无需下载更新安装，保证实时送达到用户手中；上线时间稳定、快速，不需要通过开发市场的审核；
h5缺点性能问题，是H5最大的问题，原生开发对性能的支持远超H5；功能问题，对某些硬件摄像头、陀螺仪、麦克风等硬件支持较差，频繁调用这些硬件，H5不容易扩展，调用速度也不如人意；
h5的适用场景：小游戏、媒体和营销类的产品。这些细分的方向能够最大程度发挥HTML5跨平台、开发成本低、开发速度快的优点，在整体产品体验上远超过原生app。

react-native的优点：不用webview,摆脱了webview的交互和性能问题；有较强的扩展性，java端提供了基础控件，js可以自由组合使用也可以自定义组合控件；
react-native的缺点：组件不全，第三方组件也不全，遇到某些特殊功能，需要花大力气写；性能方面也无法媲美原生，还是有一些损耗，特别是交换大数据时；IOS版本略好，androi发展较慢；ios和android代码并非通用，有可能需要维护两套代码或者在代码中做一些判断；开发人员还是需要会原生开发，不然自定义组件无法编码；

参考：
了解React Native与小程序的底层框架

如何评价RN

浅谈小程序运行机制