引言

最近幾年混合開發越來越火，從PhoneGap到Cordova到Ionic，再到ReactNative，到Flutter。同時在搜尋引擎中諸如

Ionic VS ReactNative

RN和Weex+Vue哪個好

該學RN還是學Flutter

這樣的問題也越來越多，那到底這些混合開發技術真正的差異是什麼？今天我們從他們是怎麼個混合法（技術原理）來說說。

一、混合開發流派

H5加殼派: 以Ionic和Uni-App為代表，基於WebView（Android下是WebView，iOS下是WKWebView）控制元件載入H5頁面，同時通過框架預先實現的一些能力，實現對裝置攝像頭、檔案系統等裝置能力的呼叫。

JS Run原生派：以RN和Weex為代表，使用JS進行編寫，在執行時對映成原生控制元件執行。

自成一派：以Flutter為代表，這貨直接自己弄了個引擎和執行時，自帶體系（UI元件和渲染器），除了裝置能力外UI方面全權Handle。

二、H5加殼

這類混合開發是最早出現的，早在2011年7月PhoneGap就釋出了1.0版本，初步實現了一套程式碼兩個平臺的目的。

這類App實際上就是H5加了個殼，典型的代表有Ionic和Uni-app開發者通過使用Angular或者Vue等Web前端方式編寫後執行在WebView中，由於WebView的許多限制，當這類App需要使用原生能力時就需要通過JsBridge來進行橋接，這個JsBridge就是框架提供的API和外掛。

其執行機制簡單示意圖如下：

Web App執行機制示意

這類App通常效能較差，通常用於那些UI和業務都相對簡單，並且對效能沒有特別要求的App。雖然它效能較差但是確實快，只要你會前端你就能開發，所以在很多外包公司都有其一席之地，尤其是在2012年-2016年。

需要吐槽的是Ionic，升級是好事，咱能把版本相容好好做做不？

三、JS Run原生派

這個流派以React Native和Weex為代表，RN是開山祖師。這類App在現在的手機上能應對覺大多數的業務和UI需求，效能也夠，稱得上是很不錯的方案。

這類App使用JS編寫程式碼，在編譯和執行時候會直接把對應的UI對映成原生UI，所以最終執行在裝置上的還是原生的頁面。這要求程式設計師對對應平臺的原生開發有一定基礎，尤其是需要自己寫自定義控制元件的時候。

其整個機制較為複雜，不展開講。

四、自成一派

Flutter自成一派，實現了一個自繪引擎，使用Flutter自己的佈局和繪製系統。Flutter在框架設計上借鑑了非常多的RN的思想。某種程度上可以理解為RN的升級版。

Flutter目前已經發布了正式版，且版本更新很快，但是目前github上的Issues還是非常感人

Flutter架構圖如下：

最後：其實可以看出，隨著時間的推移混合開發的方案越來越多，同時效能也越來越好，這本就是這個行業的趨勢。也是你薪水上升的依據。