H5、React Native、Native性能区别选择

“存在即合理”。凡是存在的，都是合乎规律的。任何新事物的产生总要的它的道理；任何新事物的发展总是有着取代旧事物的能力。React Native来的正是时候，一则是因为H5发展到一定程度的受限；二则是移动市场的迅速崛起强调团队快速响应和迭代；三则是用户的体验被放大，用户要求极致的快感，除非你牛x（例如：12306最近修改手机号需要用户自己发短信接收验证码）。
以下简单的介绍下H5、React Native、Native的含义：

最近三四年间，国内外的前端与全栈开发者社区都在坚持不懈地追寻使用JavaScript与HTML、CSS技术体系开发App内场景的核心工程技术。这种技术，在国内很多公司与团队中，被通称为H5。——童遥

这段是取自童老师给小二我新书作的序，没有断章取义的意思。很清楚，H5并不是狭义的HTML5新标签和API，而是工程化的“In App” technology。

iOS/Android ——原生应用（都懂得，不解释）。

React Native —— React & Native ，应运而生！

一、React Native的出现

React Native的出现，似乎是扛起的反H5的旗子。就像当年Facebook放弃H5，全部转向Native一样。这一点，我们需要认同和保持高度的清醒。那么，React Native是否又是在吞食Native的领地呢？技术的发展，是用户风向标的导向起的作用。任何一门技术的出现，都是当时用户需求的体现。

我们应该从以下几点看待React Native的出现。

"鉴往知来"——从过去的教训中总结经验，从用户的角度开拓未来
“HTML5差强人意，但是与原生应用相比还是有些差距”——为了更高的追求！用户体验！
“人才宝贵，快速迭代”——Web开发者相对较多，寻找平衡点
“跨平台！跨平台！跨平台！”——单一技术栈
“xx是世界上最好的语言” ——工程学的范畴，没有最好，只有最适合

HTML5 vs React Native ? HTML5 : React Native
结论（React Native）：
1、原生应用的用户体验
2、跨平台特性
3、开发人员单一技术栈
4、上手快，入门容易
5、社区繁荣

二、3款应用效果

注：以下所有对比均在iOS平台下

每日更新关注:http://weibo.com/hanjunqiang 新浪微博！

上面3张图片，如果去掉第一张图的“HybirdApp”的字样，是否分得清哪个是React Native开发？哪个是Native应用。
你的第一感觉是什么？

三、工程方案

为了评估3种方案的技术优势和弱势。我们需要开发功能大致相似的App。这里，我们使用了“豆瓣”的API来开发“豆搜”应用。该应用能够搜索“图书”、“音乐”、“电影”。想当年，豆瓣以“图书评论”走红，尤其是12年当红！豆瓣是一个清新文艺的社区，一个“慢公司”。最近有一则网传消息，注意是网传——“传京东投1.5亿美元控股豆瓣”。今天，不聊豆瓣，我们要聊一个工程化的问题。

我们需要将3款App的功能做到一致，同时需要保持技术要点一致。比如React Native这里使用了TabBar，那么Native我们也必须使用TabBar。简单而言就是：功能一致，组件 & API一致。我们功能如下图所示：

每日更新关注:http://weibo.com/hanjunqiang 新浪微博！

1、H5方案
在H5/Hybird应用中，我们使用AngularJS开发单页webApp，然后将该WebApp内嵌入到iOS WebView中，在iOS代码中，我们使用Navigation稍微控制下跳转。
WebApp地址：http://vczero.github.io/search/html/index.html
WebApp项目地址：https://github.com/vczero/search （很简单的一个项目）
H5/Hybird项目地址：https://github.com/vczero/search_Hybird

2、React Native
在React Native中，封装必要的功能组件。
项目地址：https://github.com/vczero/React-Dou。
项目结构如下图：

3、Native(iOS)
使用React Native大致相同的组件开发App，不使用任何第三方库，代码布局。
项目地址：https://github.com/vczero/iOS-Dou

四、对比分析

很多时候，新技术的采用最希望看到的是数据，而不是简单说“用户体验棒，开发效率高，维护成本低”。不过，生活中也有这样的同学，知一二而能窥全貌。当然，本人生性胆小，也没有那么多的表哥和隔壁的老王，所以不敢早下定论，不敢太放肆。赵本山在《大笑江湖》中有句名言“May the force be with you”（别太放肆,没什么用）。因此，从以下几个方面做一个简单的对比。