一、基本對(duì)比
| 特點(diǎn) | 原生 | Cordova | RN | Flutter |
|---|---|---|---|---|
| 發(fā)布時(shí)間 | 2014 | 2015 | 2017 | |
| 維護(hù)者 | Adobe(奧多比) | |||
| 語言 | js | js | dart | |
| 代碼產(chǎn)物 | www文件夾（網(wǎng)頁相關(guān)資源） | jsBundle | 二進(jìn)制文件 | |
| 支持平臺(tái) | Android、IOS | Android、IOS、(PC) | Android、IOS、(Web/PC) | |
| 界面順滑度 | 絲般順滑 | 渣 | 絲般順滑 | 絲般順滑 ，不過iOS風(fēng)格組件較少，寫出的頁面太像安卓 |
| 開發(fā)成本 | 高，不支持跨平臺(tái) | 低，只要會(huì)前端就能開發(fā) | 較低，有前端基礎(chǔ)學(xué)下React | 一般，需學(xué)習(xí)dart語言 |
| 運(yùn)行速度 | 賊高 | 渣 | 相比原生略慢 | 幾乎可以達(dá)到原生性能 |
| 使用代表 | 微信 | 海關(guān)門戶 | 京東 | 咸魚 |
二、優(yōu)缺點(diǎn)對(duì)比
1.原生
- 優(yōu)點(diǎn)
1.運(yùn)行效率高
- 缺點(diǎn)
1.不支持跨平臺(tái)開發(fā)效率低
2.支持熱更新應(yīng)用上架APPStore被拒風(fēng)險(xiǎn)
2.Cordova
- 優(yōu)點(diǎn)
1.開發(fā)成本低，只要會(huì)前端開發(fā)就能開Cordova頁面
- 缺點(diǎn)
1.開發(fā)出來的界面就是網(wǎng)頁，特別不流暢
3.RN
- 優(yōu)點(diǎn)
1.開發(fā)成本低 Learn once, write anywhere
2.開發(fā)出來的界面更接近原生
3.第三方插件豐富
- 缺點(diǎn)
1.對(duì)原生安卓支持不是很好。常常要寫支持安卓平臺(tái)的代碼
2. 編輯器不是很好用，調(diào)試需要網(wǎng)頁調(diào)試，讓我一個(gè)原生開發(fā)者無法接受
4.Flutter
- 優(yōu)點(diǎn)
1.寫出來的頁面運(yùn)行效率幾乎和原生無差別
2.谷歌親兒子，Android studio編輯器非常好用
3.對(duì)安卓原生支持非常好
- 缺點(diǎn)
1.iOS風(fēng)格組件太少了，界面寫出來大多安卓風(fēng)格，不太習(xí)慣（也可能是iOS開發(fā)的偏見）
2.第三方插件非常豐富。
三、實(shí)現(xiàn)原理
- RN
- React Native 是一套 UI 框架，默認(rèn)情況下 React Native 會(huì)在 Activity 下加載 JS 文件，然后運(yùn)行在 JavaScriptCore 中解析 Bundle 文件布局，最終堆疊出一系列的原生控件進(jìn)行渲染。
- 如
<View>標(biāo)簽對(duì)應(yīng)ViewGroup/UIView，<ScrollView>標(biāo)簽對(duì)應(yīng)ScrollView/UIScrollView，<Image>標(biāo)簽對(duì)應(yīng)ImageView/UIImageView等
2.flutter
- Flutter 中絕大部分的 Widget 都與平臺(tái)無關(guān)， 開發(fā)者基于 Framework 開發(fā) App ，而 Framework 運(yùn)行在 Engine 之上，由 Engine 進(jìn)行適配和跨平臺(tái)支持。這個(gè)跨平臺(tái)的支持過程，其實(shí)就是將 Flutter UI 中的 Widget “數(shù)據(jù)化” ，然后通過 Engine 上的 Skia 直接繪制到屏幕上 。
