博客 | H5、React Native、Native 应用对比分析

H5、React Native、Native应用对比分析

离上次在北京开源中国盛典已经快一个月了，有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站，这也是无可争议的事实，但是，我真想的是妹子！！！［偷笑］。从上次演讲后，有一些同学陆陆续续问我演讲的PPT在哪，还有不少同学希望看到［手稿］，这学习精神，在下实在是佩服啊。有着这么热情的小伙伴，我激动不已啊，所以在此公布［手稿］，方便大家可以将［PPT］和［手稿］双手齐下，：）。2015年，我们要一起努力完成以前吹过的牛逼.....  下面是［多图预警］，请考虑切wifi，土豪请无视我，也可拿红包砸我，：）

－－－－－－－－－－－－－－－华丽丽的分割线，主题开始－－－－－－－－－－－－－－－－－－－－－

“存在即合理”。凡是存在的，都是合乎规律的。任何新事物的产生总要的它的道理；任何新事物的发展总是有着取代旧事物的能力。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的出现。

二、3款应用效果

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

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

你的第一感觉是什么？

三、工程方案

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

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

2、React Native

在React Native中，封装必要的功能组件。

项目地址：https://github.com/vczero/React-Dou。

项目结构如下图：

四、对比分析

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

－－－－－－－－－－－－－－－分析提纲－－－－－－－－－－－－－－－－

1、开发方式

2、性能 & 体验

3、更新 & 维护

1、开发方式

很多人说React Native的代码不好看，不好理解。那是因为前端工程师都熟悉了Web的开发方式。怎么解决这个问题呢，可以先看看iOS代码，断定不熟悉iOS的同学心里会默念“一万匹**马奔腾”。那时候，你再看React Native，你会觉得使用React Native开发App是件多么美好的事！OK，我们先来看下三者在开始“一款简单App”的代码结构。

（1）代码结构

H5/Hybird的开发模式，我们需要维护3套代码，两套是Native（iOS/Android）代码，一套是WebApp版本。这里，我们使用AngularJS作为WebApp单页开发框架。如下图所示。

在React Native中，同样需要关注部分的Native代码，但是大部分还是前端熟悉的JavaScript。在“豆搜”应用中，代码结构如下：

在Native开发中，更加强调Native开发者的能力。平台是：iOS/Android。

结论：从前端角度而言，React Native跨平台特性，不要开发者深入的了解各平台就能开发一款高效App。同时，语言层面而言，JavaScript运用很广泛，入门门槛相对较低。React Native虽然抛弃了MVC分离实践，但是从业务角度而言，更为合理。一切而言：对前端，对移动领域是利好的消息。

   //JSX   <ScrollView style={styles.flex_1}>     <View style={[styles.search, styles.row]}>       <View style={styles.flex_1}>         <Search placeholder="请输入图书的名称" onChangeText={this._changeText}/>       </View>       <TouchableOpacity style={styles.btn} onPress={this._search}>         <Text style={styles.fontFFF}>搜索</Text>       </TouchableOpacity>     </View>     {       this.state.show ?       <ListView         dataSource={this.state.dataSource}         renderRow={this._renderRow}         />       : Util.loading     }   </ScrollView>   //样式   var styles = StyleSheet.create({       flex_1:{         flex:1,         marginTop:5       },       search:{         paddingLeft:5,         paddingRight:5,         height:45       },       btn:{         width:50,         backgroundColor:'#0091FF',         justifyContent:'center',         alignItems:'center'       },       fontFFF:{         color:'#fff'       },       row:{         flexDirection:'row'       }     });

而Native布局就有种让你想吐的感觉，尤其是iOS的布局。这里不是指采用xib或者Storyboard，而是单纯的代码，例如添加一个文本：

UILabel *publisher = [[UILabel alloc]init]; publisher.frame = CGRectMake(bookImgWidth + 10, 50, 200, 30); publisher.textColor = [UIColor colorWithRed:0.400 green:0.400 blue:0.435 alpha:1]; publisher.font = [UIFont fontWithName:@"Heiti TC" size:13]; publisher.text = obj[@"publisher"]; [item addSubview:publisher];

（3）UI截面图

Hybrid方式截面图

可以看到第一层列表页是完整的布局，实际上这就是Web页面；而第二层灰色的是Native的WebView组件。

iOS UI截面图

可以看到Native页面的组件特别多，即使是列表页，其中某一项都是一个组件（控件）。

当然，我们就会想，能够完全调用原生组件呢？那样性能是否更好？

React Native UI截面图

可以清楚的看到React Native调用的全部是Native组件。并且层次更深，因为React Native做了组件的封装。如上图，蓝色边框的就是RCTScrollView组件。这就是React Native相比H5更高效的原因。

getCurrentRoutes() - returns the current list of routes jumpBack() - Jump backward without unmounting the current scene jumpForward() - Jump forward to the next scene in the route stack jumpTo(route) - Transition to an existing scene without unmounting push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to pop() - Transition back and unmount the current scene replace(route) - Replace the current scene with a new route replaceAtIndex(route, index) - Replace a scene as specified by an index replacePrevious(route) - Replace the previous scene immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted popToTop() - Pop to the first scene in the stack, unmounting every other scene

相对Native而言，这些接口更Native还是很相似的。

//iOS UINavigationController   //相对Web而言，不用自己去实现路由，并且路由更加清晰          [self.navigationController pushViewController:detail animated:YES];

"豆搜" WebApp路由（基于AngularJS）如下：

"豆搜" React Native版本导航如下：

"豆搜" iOS版本导航代码如下：

总结：React Native封装的导航控制更容易理解。

2、性能 & 体验

我们都很关注一款App性能。因此测试和体验App的性能很重要。以下测试，都是基于相同的case。

测试平台：模拟器，iphone6，iOS8.4

（1）内存

首先，我们来看下Native应用占用的内存情况。一开始，原生应用启动后，占用内存是20~25M；针对相同的case，跑了2min，结果如下图：

可以看出，峰值是87.9M，均值是72M；内存释放比较及时。

我们再来看下Hybird App的情况。App已启动，占用内存35~55M;同样，跑了2min以上，结果如下图：

可以看出，峰值在137.9M，因为整个应用在WebView中，内存释放不明显，存在缓存。

最后，看下React Native的情况。App启动占用内存35～60M，同样跑2min以上，结果如下图：

可以看出，峰值在142M，内存相对释放明显。

总结：React Native和Web View在简单App上相差不大。二者主要：内存消耗主要是在网页数据上。

（2）CPU

我们可以看一下Native应用程序CPU的情况，最高值在41%。

Hybird App的最高值在30%。

React Native的最高值在34%。

总结：CPU使用率大体相近，React Native的占用率低于Native。

相比快速迭代和热更新，比Native多了811KB一点都不重要，我们将图片素材、静态资源线上更新缓存起来即可减少很多体积。总结：牺牲一点体积，换更大的灵活性！（世界上哪有那么美的事，除非丑，就会想得美，:) ）。

总结：Native／React Native的体验相对而言更流畅。

3、更新 & 维护

总结：React Native 统一了开发人员技术栈，代码维护相对容易。

五、综合

1、开发方式

2、性能 & 体验

3、更新 & 维护

（1）更新能力: H5/Hybird > React Native > Native（2）维护成本: H5/Hybird <= React Native < Native

React Native定制难度相比Native有些大；但是具备跨平台能力和热更新能力。

说了这么多，最后 个人建议：

一个新的App完全可以采用React Native开发，这样成本会低很多。    

关于演讲：

PPT: http://www.oschina.net/doc/24007

视频： http://www.oschina.net/question/865233_2145334 （这个演讲在移动专场下半场开场）       

六、图书 & 工作机会

最后说一下图书《React Native入门与实战》吧。这是一本［难产］的家伙，15年写的比较顺利，最后因为北京雾霾，印刷厂偶尔停工，一直在难产。前段时间，图书发往各地书店，到店比较迟，我猜测是因为雾霾，找不到高速出口～～目前该书由人民邮电出版社图灵原创出版，已经开卖了。本书主要是希望带领大家一起进入React Native开发领域，针对每个API和组件都有详细的案例，同时为了更好的实战，最后3章以实际案例（通讯录App，LBS App，基于豆瓣OpenAPI的搜索 App）给出，供大家参考。觉得入门是完全没问题的，后期大家可以一起交流，争取丰富国内React Native社区。

《React Native入门与实战》各网站 购买地址：

京东： http://item.jd.com/10089810271.html (目前应该都有货了，微信有同学传照片给我看了，铁粉哈)

http://item.jd.com/11844102.html (京东自营，货源需要跟客服确认哦)

互动： http://product.china-pub.com/4904552 (已经有货)

天猫： https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.21.rc0yeu&id=525484671101&cat_id=2&rn=4690ef5b4e06412ffae4d1cc4f4dcc9a&user_id=1020536390&is_b=1 (天猫这家卖的还可以，不知道为啥京东看不到数据，京东应该才是技术买书的最爱啊，听说也预售了不少呢)

［工作机会］

说了这么多了，都晚上11点30了，困，最近离公司远啊；对了，有需要考虑 上海 工作机会的同学可以联系我，前端、H5、Node.js等都要，Android、java都可以推荐哦。目前负责前端团队，具体问题的可以邮件(wlhmyit@126.com)或者私信给我。以后可以一起装逼一起撸代码。