ionic和react native的区别

superbug commented 9 years ago

我对hybrid的理解：

我们想用web技术开发移动app，要解决以下几个问题：

1、最好高大上一些，最好能够封装一个app让用户安装，不要让用户打开浏览器输入网址（区别于响应式）＝＝＝》android和ios都有webview控件允许内嵌一个浏览器打开一个html页面，这个问题解决。

2、最好能够让我写一遍代码，然后所有平台都能够使用（开发、维护成本方面的考量）＝＝＝》cordova可以实现不同平台的编译打包，写一遍代码可以编译出不同终端的版本，这个问题也解决。

3、要让我能够访问设备信息（摄像头、电话簿、陀螺仪。。。）＝＝＝》也是cordova，封装了统一的js接口让我们在js里可以访问native api，这个问题也解决。

ionic基本实现思路

它事实上就是angular + cordova + 一套前端ui控件库，本质上还是手机端webview控件包了个网站。其实不用angular，用backbone、react、ember也一样能够实现，只要搭载一个ui库，类似：ratchet 或 framework7，再配合上cordova也一样能够实现。只是需要折腾一下做下整合。ionic也只是帮我们做了下整合工作，它天生具备angular的mvvm模式帮我们很快地开发单页应用，然后还集成了一套样式组建库，让这个网站看起来像个app，借助cordova获取设备访问及不同平台的打包能力。

其实从这个维度讲，ionic并没有把hybrid的思想发挥得很好，从头到尾它除了一个webview，基本没用到手机端的其他控件。hybrid应该是鼓励用适合的方法解决适合的问题：如果你要开发一个 3D 游戏，原生开发方式能够带来更好的游戏体验，如果就是简单的信息展示，表单填写，那么大可在app里嵌入个webview用web技术去解决（当然如果任性得只剩下钱全用navtive的代码去写也无所谓）。

这边有两篇文章验证了以上的观点：

1、BlendUI，让webapp的体验和交互得到质的提升 2、Hybrid sweet spot: Native navigation, web content

react native是怎么做的

其实有一篇文章解释得很清楚： React Native通信机制详解

它与ionic的区别就在于：ionic是html ＋ css冒充出来的控件，react native调用的真正的native控件。所以这就是体现了既拥有Native的用户体验、又保留React的开发效率--React Native的设计理念。

参考文章：

React Native概述：背景、规划和风险

最后来做个对比：

ionic:

优点：

1、纯web思维，开发速度快，简单方便 2、一次编码，到处运行

缺点：

1、web技术无法解决一切问题，对于比较耗性能的地方无法利用native的思维实现优势互补

react native:

优点：

1、拥有native的用户体验和web的开发效率

缺点：

1、对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、api无法满足需求时就必然需要懂一些native的东西去扩展。

2、官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。事实上，从官方的api来看SliderIOS，SwitchIOS..等等这些控件，之后势必会出现SliderAndroid，SwitchAndroid...，也就是很可能针对不同的平台会需要写多套代码。

~~3、发展还不成熟，目前只有ios的实现，android的实现需要等到10月份。~~