[譯] React Native vs. Cordova、PhoneGap、Ionic，等等

原文連接: learnreact.design/2018/02/14/…

喜歡理由: 文筆生動 通俗易懂

特別鳴謝: 原做者 Linton Ye 的傾情校對

系列博客: 用通俗的語言和塗鴉來解釋 React 術語

• 圖解 React
• 圖解 React Native
• 組件、Props 和 State
• 深刻理解 Props 和 State
• React Native vs. Cordova、PhoneGap、Ionic，等等 (本文)

在前面的文章中，我曾說過 React Native 很棒，由於它能讓咱們使用原生 UI 來開發應用。React Native 應用的用戶體驗要比使用 WebView UI 的好不少。可是，「原生」的真正含義究竟是什麼呢？什麼是 WebView UI ？什麼原生 UI 比 WebView UI 好呢？React Native 相比於其餘移動端框架 (好比 PhoneGap、Cordova 和 Ionic) 又如何呢？

如今咱們來深刻這些問題。坐穩了！(譯註: 老司機口頭禪)

學習目標

當你讀完本文後，但願你能從新回到這裏，並可以輕鬆回答如下問題:

• 什麼是原生應用？
• 什麼是 WebView UI ？
• 更原生化的框架的優點和劣勢分別是什麼？原生化更少的框架呢？
• React Native 與 Cordova 相好比何？

到底什麼纔是「原生」應用？

要理解「原生化」 (nativeness) 的真正含義，先看下面:

我是黑客帝國 (The Matrix) 的死忠粉，你呢？在影片中，咱們所認知的現實其實是一個模擬世界。有線索提示，即便是錫安，最後一座人類的自由之城，也是模擬出來的。多層模擬現實的想法一直讓我爲之着迷，一個虛擬世界做爲模擬運行在另外一個虛擬世界中，而這個虛擬世界又運行在第三個世界中。

這與計算機 (或手機) 的軟件架構十分相像。

軟件是關於如何操做大量晶體管和電路 (二者統稱爲硬件) 的指令的集合。直接運行在硬件上的原始指令對咱們人類來講是幾乎沒法理解的, 特別是考慮到當今計算機的複雜性和規模。

要使得軟件能夠理解和操做的話，計算機科學家將其劃分爲多個層，這些層均是由框架構成的，每一個框架都運行在另外一個框架之上。在全部框架中，越接近硬件的框架，咱們就說它更「原生」。

因此，一個應用的「原生化」只是一個相對的概念。嚴格來講，咱們沒法說一個應用自己是不是原生的。咱們只能說，相比於另外一個應用，它是更原生的。舉個例子，你可使用 C++ 、Java (或 Kotlin) 或 Cordova 來開發安卓應用。C++ 寫的應用是最原生的，而 Cordova 寫的應用是最不原生的。Java/Kotlin 寫的應用介於二者之間。

更原生的應用的好處是什麼？

原生化多或少都有各自的好處。接近金屬意味着更多的自由，而更多的模擬會讓你更爲溫馨。(求助: metal 是指黑客帝國裏的矩陣嗎？仍是指硬件？)

一般，更原生的框架中的程序可以獲取更多的硬件功能，以及使用硬件更加自由。因爲在不一樣語言之間進行模擬和翻譯的開銷較低，一般它的運行效率更高。但現實是殘酷的，它的代碼一般更難編寫和理解。

另外一方面，對於原生化更少的框架來講，一般編寫代碼更爲簡單。編碼語言也更容易理解和簡潔(須要的代碼少)。它的詞彙更接近與咱們人類的天然語言。它不須要咱們十分了解硬件的構成以及它在幕後的工做方式。還有一個額外的好處，原生化較少的框架中的程序一般更具可移植性，程序能夠在徹底不一樣的硬件平臺上運行而無需修改，由於它的詞彙和底層概念不包含任何特定於原始硬件的內容。可是，這一切便利的代碼就是一般會犧牲一些效率和自由度。

移動端框架陣營

在 React Native 出現以前，移動端框架通常分爲兩個陣營。

首先是原生陣營，例如安卓的 Java/Kotlin 和 IOS 的 Objective-C/Swift 。此陣營中的應用速度都很快，而且可使用豐富的硬件功能。用戶界面是針對目標平臺(安卓或 IOS)的定製的，所以使用起來是流暢且愉悅的。可是，全部這些好處都被限制在一個平臺上了。要開發應用的話，須要學習不一樣的框架，這使得學習成本翻倍，甚至更高，在這點上遠高於其餘數百萬的 Web 開發人員。

另一個陣營就是以 Cordova/PhoneGap 和 Ionic 爲表明的。這些框架可讓 Web 開發人員使用他們已經具有的 HTML、CSS 和 JavaScript 技能來開發應用。這些應用能夠同時運行在安卓和 IOS 平臺上(還能夠有更多平臺)。可是，相比於原生應用，這類應用會沒有那麼流暢，能訪問的硬件功能也有限。最重要的是，這些應用的用戶界面太爛了！由於這些框架使用的 WebView 來渲染 UI，因此咱們將其稱之爲 WebView 框架。

WebView 框架是在原生框架之上構建的。咱們能夠將前者視爲運行在後者內部的模擬世界中。這正是他們有上述的好處和限制的緣由所在。

爲何咱們不能集二者之優點，同時又避免它們的不足呢？這正是 React Native 要作的事。

React Native 表明的是移動端框架的第三陣營。它的 UI 層要比 WebView 框架更原生，而其他部分處於模擬層，以實現其易用性。

React Native 要比 WebView UI 原生得多

像 Cordova 這樣的框架可使用 Web 技術來開發移動 UI 。它們是如何作到的呢？它們在每一個應用中都內嵌了 Web 瀏覽器，並美名其曰 WebView！你在 UI 中看到的全部，包括按鈕、菜單和動畫，都是在瀏覽器的網頁中運行的。以模擬的角度來看，Cordova 應用的 UI 就是運行在 Web 瀏覽器中的模擬世界，而瀏覽器又是運行在原生框架裏的另外一個模擬世界。

相比之下，React Native 的 UI 要比 WebView 框架低一個層級，它直接運行在原生框架裏。

這種架構奠基了 React Native UI 的優點。React Native 直接使用了原生 UI 組件，而 WebView 框架是使用 HTML/CSS 的 Web UI 來模擬原生 UI 。真和假，你更喜歡哪一個？

根據經驗，識別出一個應用是不是使用 WebView 框架開發的並不難。經過一些小測試，好比滾動加速、鍵盤操做、導航和 UI 的流暢性。若是這些操做達不到原生般的效果，那麼累積後的效果將致使糟糕的用戶體驗。

React Native 使用 JavaScript 來讓開發變得簡單

另外一方面，React Native 還可讓咱們使用 JavaScript 來編寫應用，同時使用相似於 HTML 和 CSS 的語法來開發 UI 。這無疑下降了 Web 設計師和開發人員的門檻。

當須要時，React Native 還提供了一種滲透到原生框架的方法，以實現咱們但願在應用中實現的任何原生功能。這有點像在黑客帝國中打電話。

因此 WebView 框架一無可取嘍？

不，固然不是。舉個例子，若是你已經有了 Web 應用，而且想盡快地發佈到應用商店中。您願意犧牲用戶體驗以縮短面向用戶的時間。

另外一種狀況是，若是你的應用中並無太多交互相關的東西，那麼把它放入 WebView 中也並沒那麼糟。

可是，若是應用的用戶體驗重要的話，若是應用具備必定的交互性的話，像接受用戶輸入、拖拽、滑動頁面等，那麼決定應該考慮使用 React Native 。由於使用 WebView UI 來模擬原生 UI 是下下策。

總結

好了，咱們已經介紹了「原生」的真正含義、什麼是 WebView UI 、爲何 React Native UI 更好，以及 React Native 相比於像 Cordova/PhoneGap 和 Ionic 這樣的 WebView 框架如何。

你怎麼認爲？你會使用哪一種框架來開發你的下一個應用？