（一）H5说敏、React Native亮垫、Native應用對比分析
文章來源：@王利華模软，vczero
http://vczero.github.io/react_native/H5-React-Native-Native.html
“存在即合理”。凡是存在的饮潦，都是合乎規(guī)律的燃异。任何新事物的產生總要的它的道理；任何新事物的發(fā)展總是有著取代舊事物的能力继蜡。React Native來的正是時候回俐，一則是因為H5發(fā)展到一定程度的受限；二則是移動市場的迅速崛起強調團隊快速響應和迭代稀并；三則是用戶的體驗被放大仅颇，用戶要求極致的快感，除非你牛x（例如：12306最近修改手機號需要用戶自己發(fā)短信接收驗證碼）碘举。
以下簡單的介紹下H5忘瓦、React Native、Native的含義：
最近三四年間引颈，國內外的前端與全棧開發(fā)者社區(qū)都在堅持不懈地追尋使用JavaScript與HTML耕皮、CSS技術體系開發(fā)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的領地呢？技術的發(fā)展仅胞，是用戶風向標的導向起的作用每辟。任何一門技術的出現，都是當時用戶需求的體現干旧。
我們應該從以下幾點看待React Native的出現渠欺。
"鑒往知來"——從過去的教訓中總結經驗，從用戶的角度開拓未來
“HTML5差強人意椎眯，但是與原生應用相比還是有些差距”——為了更高的追求挠将！ 用戶體驗！
“人才寶貴编整，快速迭代”——Web開發(fā)者相對較多舔稀，尋找平衡點
“跨平臺！跨平臺闹击！跨平臺镶蹋！”——單一技術棧
“xx是世界上最好的語言” ——工程學的范疇成艘，沒有最好赏半，只有最適合
HTML5vsReact Native?HTML5:React Native
結論（React Native）：
1、原生應用的用戶體驗
2淆两、跨平臺特性
3断箫、開發(fā)人員單一技術棧
4、上手快秋冰，入門容易
5仲义、社區(qū)繁榮
二、3款應用效果
注：以下所有對比均在iOS平臺下
上面3張圖片剑勾，如果去掉第一張圖的“HybirdApp”的字樣埃撵，是否分得清哪個是React Native開發(fā)？哪個是Native應用虽另。
你的第一感覺是什么暂刘？
三、工程方案
為了評估3種方案的技術優(yōu)勢和弱勢捂刺。我們需要開發(fā)功能大致相似的App谣拣。這里募寨，我們使用了“豆瓣”的API來開發(fā)“豆搜”應用。該應用能夠搜索“圖書”森缠、“音樂”拔鹰、“電影”。想當年贵涵，豆瓣以“圖書評論”走紅列肢，尤其是12年當紅！豆瓣是一個清新文藝的社區(qū)宾茂，一個“慢公司”例书。最近有一則網傳消息，注意是網傳——“傳京東投1.5億美元控股豆瓣”刻炒。今天决采，不聊豆瓣，我們要聊一個工程化的問題坟奥。
我們需要將3款App的功能做到一致树瞭，同時需要保持技術要點一致。比如React Native這里使用了TabBar爱谁，那么Native我們也必須使用TabBar晒喷。簡單而言就是：功能一致，組件 & API一致访敌。我們功能如下圖所示：
1凉敲、H5方案
在H5/Hybird應用中，我們使用AngularJS開發(fā)單頁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大致相同的組件開發(fā)App，不使用任何第三方庫走搁，代碼布局独柑。
項目地址：https://github.com/vczero/iOS-Dou
四、對比分析
很多時候私植，新技術的采用最希望看到的是數據忌栅，而不是簡單說“用戶體驗棒，開發(fā)效率高兵琳，維護成本低”狂秘。不過骇径，生活中也有這樣的同學，知一二而能窺全貌者春。當然破衔，本人生性膽小，也沒有那么多的表哥和隔壁的老王钱烟，所以不敢早下定論晰筛，不敢太放肆。趙本山在《大笑江湖》中有句名言“May the force be with you”（別太放肆,沒什么用）拴袭。因此读第，從以下幾個方面做一個簡單的對比。
－－－－－－－－－－提綱－－－－－－－－－－－－
1拥刻、開發(fā)方式
（1）代碼結構
（2）UI布局
（3）UI截面圖
（4）路由／Navigation
（5）第三方生態(tài)鏈
2怜瞒、性能 & 體驗
（1）內存
（2）CPU
（3）動畫
（4）安裝包體積
（5）Big ListView
（6）真機體驗
3、更新 & 維護
（1）更新能力
（2）維護成本
－－－－－－－－－－提綱－－－－－－－－－－－－
1般哼、開發(fā)方式
很多人說React Native的代碼不好看吴汪，不好理解。那是因為前端工程師都熟悉了Web的開發(fā)方式蒸眠。怎么解決這個問題呢漾橙，可以先看看iOS代碼，斷定不熟悉iOS的同學心里會默念“一萬匹**馬奔騰”楞卡。那時候霜运，你再看React Native，你會覺得使用React Native開發(fā)App是件多么美好的事蒋腮！OK淘捡，我們先來看下三者在開始“一款簡單App”的代碼結構。
（1）代碼結構
H5/Hybird的開發(fā)模式徽惋，我們需要維護3套代碼案淋，兩套是Native（iOS/Android）代碼座韵，一套是WebApp版本险绘。這里，我們使用AngularJS作為WebApp單頁開發(fā)框架誉碴。如下圖所示宦棺。
在React Native中，同樣需要關注部分的Native代碼黔帕，但是大部分還是前端熟悉的JavaScript代咸。在“豆搜”應用中，代碼結構如下：
在Native開發(fā)中成黄，更加強調Native開發(fā)者的能力呐芥。平臺是：iOS/Android逻杖。
結論：從前端角度而言，React Native跨平臺特性思瘟，不要開發(fā)者深入的了解各平臺就能開發(fā)一款高效App荸百。同時，語言層面而言滨攻，JavaScript運用很廣泛够话，入門門檻相對較低。React Native雖然拋棄了MVC分離實踐光绕，但是從業(yè)務角度而言女嘲，更為合理。一切而言：對前端诞帐，對移動領域是利好的消息欣尼。
（2）UI布局
“面容姣好”，合理的UI卻總是跟著時間在變停蕉。那么UI布局就不是小事媒至。
Web開發(fā)布局目前大多是 DIV + CSS。
React Native的布局方式是Flexbox谷徙。
//JSX
搜索
{
this.state.show ?
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
: Util.loading
}
//樣式
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];
總結：React Native既綜合了Web布局的優(yōu)勢，采用了FlexBox和JSX屈尼，又使用了Native原生組件册着。比如我們使用一個文本組件。
測試
（3）UI截面圖
Hybrid方式截面圖
可以看到第一層列表頁是完整的布局脾歧，實際上這就是Web頁面甲捏；而第二層灰色的是Native的WebView組件。
iOS UI截面圖
可以看到Native頁面的組件特別多鞭执，即使是列表頁司顿，其中某一項都是一個組件（控件）。
當然兄纺，我們就會想大溜，能夠完全調用原生組件呢？那樣性能是否更好估脆？
React Native UI截面圖
可以清楚的看到React Native調用的全部是Native組件钦奋。并且層次更深，因為React Native做了組件的封裝。如上圖付材，藍色邊框的就是RCTScrollView組件朦拖。
（4）路由／Navigation
在Web單頁面應用中，路由由History API實現厌衔。
而React Native采用的路由是原生的UINavigationController導航控制器實現贞谓。
React Native NavigatorIOS組件封裝程度高；Navigator可定制化程度高葵诈。
Navigator方法如下：
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封裝的導航控制更容易理解。
（5）第三方生態(tài)鏈
“我的是我的泞坦，你的也是我的窖贤。 ”——我不是“瘋狂女友”，我是React Native贰锁！
我們缺少“城市列表”組件赃梧，OK，使用JSX封裝一個豌熄；覺得性能太低授嘀，OK，基于React Native方案封裝一個原生組件锣险。
這個iOS圖表庫不錯蹄皱，拿來用唄！ => 完美芯肤！
這一切都是基于React Native提供的模塊擴展方案巷折。
所以說：iOS第三方庫 + 部分JavaScript庫 ＝ React Native 生態(tài)庫
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魂莫。
（3）動畫
React Native提供了Animated API實現動畫。簡單效果爹耗，基本OK耙考。個人覺得React Native不適合做游戲，尤其布局能力潭兽。
Native Animation提供UIView動畫
H5/Hybird：采用js動畫能力
總結：React Native Animated API / 封裝Native動畫庫 可以滿足基本需求
（4）安裝包體積
Hybird App:
34(App殼) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB倦始。
React Native:
不含bundle: 843KB
含bundle: 995KB
Native
83KB
React Native框架包大小
843(不含bundle) - 32(Hybird_app空殼，初識項目) = 811KB
相比快速迭代和熱更新山卦，比Native多了811KB一點都不重要鞋邑，我們將圖片素材、靜態(tài)資源線上更新緩存起來即可減少很多體積。
總結：犧牲一點體積枚碗，換更大的靈活性Ｓ庖弧（世界上哪有那么美的事，除非丑肮雨，就會想得美遵堵，:) ）。
（5）Big ListView & Scroll 性能
循環(huán)列表項500次: H5頁面慘不忍睹
React Native還可以接受
Native 采用UITabView更高效怨规，因為不渲染視圖外部分陌宿。
（6）真機體驗
機型：iphone4s，iOS7
Native > React Native > Hybird
如果非要給個數字的話波丰，那我個人主觀感受是：
Native： 95％＋ 流暢度
React Native: 85~90% 流暢度
H5/Hybird： 70% 流暢度
總結：Native／React Native的體驗相對而言更流暢壳坪。
3、更新 & 維護
（1）更新能力
H5/Hybird： 隨時更新呀舔，適合做營銷頁面弥虐，目前攜程一些BU全部都是H5頁面；但是重要的部分還是Native媚赖。
React Native：React Native部分可以熱更新霜瘪，bug及時修復。
Native：隨版本更新惧磺，尤其iOS審核嚴格颖对，需要測試過關，否則影響用戶磨隘。
（2）維護成本
H5/Hybird： Web代碼 ＋ iOS/Android平臺支持
React Native：可以一個開發(fā)團隊 ＋ iOS/Android工程師缤底；業(yè)務組件顆粒度小，不用把握全局即可修改業(yè)務代碼番捂。
Native：iOS/Android開發(fā)周期長个唧，兩個開發(fā)團隊。
總結：React Native 統一了開發(fā)人員技術棧设预，代碼維護相對容易徙歼。
五、綜合
1鳖枕、開發(fā)方式
（1）代碼結構： React Native更為合理魄梯，組件化程度高
（2）UI布局：Web布局靈活度 > React Native > Native
（3）UI截面圖：React Native使用的是原生組件，
（4）路由／Navigation：React Native & Native更勝一籌
（5）第三方生態(tài)鏈：Native modules + js modules = React Native modules
2宾符、性能 & 體驗
（1）內存：Native最少酿秸；因為React Native含有框架，所以相對較高魏烫，但是后期平穩(wěn)后會優(yōu)于Native辣苏。
（2）CPU：React Native居中肝箱。
（3）動畫：React Native動畫需求基本滿足。
（4）安裝包體積：React Native框架打包后考润，811KB狭园。相比熱更新读处，可以忽略和考慮資源規(guī)劃糊治。
（5）Big ListView
（6）真機體驗：Native >= React Native > H5/Hybrid
3、更新 & 維護
（1）更新能力: H5/Hybird > React Native > Native
（2）維護成本: H5/Hybird <= React Native < Native
React Native定制難度相比Native有些大罚舱；但是具備跨平臺能力和熱更新能力井辜。
（二）Who's using React Native?
來源
https://facebook.github.io/react-native/showcase.html
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
Using React Native in the Facebook App
Facebook Ads Manager
How We Built the First Cross-Platform React Native App
F8
Tutorial: Building the F8 conference app
Airbnb
Hybrid React Native Apps at Airbnb
Walmart
Tesla
Tencent QQ
QQ is China's largest messaging platform, with over 829 million active accounts
Artsy
Baidu Mobile (手機百度)
Baidu Mobile is a search engine used by over 600 million people in China
Bloomberg
How Bloomberg Used React Native to Develop its new Consumer App
CBS Sports Franchise Football
Award winning Fantasy Football league manager built with React Native
Chop
How we built Chop using React Native
Delivery.com
React Native in an Existing iOS App: Getting Started
Discord
Using React Native: One Year Later
Flare by GoDaddy
Social network that connects entrepreneurs to fellow entrepreneurs, consumers, investors and experts
Gyroscope
Building a visualization experience with React Native
Huiseoul (惠首爾)
Building a conversational E-commerce app in 6 weeks with React Native
JD（手機京東）
JD.com is China’s largest ecommerce company by revenue and a member of the Fortune Global 500.
li.st
Building li.st for Android with React Native
SoundCloud Pulse
Why React Native worked well for us
Townske
The experience of a web developer building an app using React Native
UberEATS
Powering UberEATS with React Native and Uber Engineering
Vogue
Wix.com
Building a React Native App for 80 Million Users
