作者 | 胥磊

審校 | 孫淑娟

隨著移動應用的不斷普及，各個公司都在尋找可以在多種設備上運行的跨平臺應用解決方案，這里跨平臺主要是指安卓和iOS。統(tǒng)計數(shù)據(jù)顯示：截止2021年6月，安卓以接近73%的份額控制了移動操作系統(tǒng)市場，繼續(xù)保持其全球移動操作系統(tǒng)的領先地位。谷歌的安卓和蘋果的iOS共同占用超過99%的全球市場份額。

本文中，我們將比較兩個流行的跨平臺開發(fā)框架：Flutter和React Native，對比分析每個框架的優(yōu)點和缺點，并探討哪種框架更適合在2023年使用。

一、為什么移動應用開發(fā)如此受歡迎？

移動應用開發(fā)是一個穩(wěn)步增長的業(yè)務域，地球上幾乎所有的人都有手機，這意味著潛在的用戶數(shù)量近乎是無限的，同時現(xiàn)在幾乎所有的產品都有應用開發(fā)的需求。你可以選擇多種方式來設計和構建一個應用，可以使用本地方法如Swift和Object-C來創(chuàng)建iOS應用，Java來創(chuàng)建安卓應用，這些都是官方提供支持和功能更新的編程語言。當然也可以使用跨平臺框架如Flutter和React Native。

二、什么是跨平臺應用開發(fā)

開始之前，我們先解釋下“跨平臺應用開發(fā)”這個術語，其指的是使用一套代碼開發(fā)的應用可以運行在iOS和安卓上，同時提供近乎相同的功能體驗，在這里我們將其分為以下兩類。

1.混合開發(fā)

混合型應用指的是使用HTML5、CSS和JavaScript等前端技術組合開發(fā)的應用。有些代碼運行在目標平臺的網絡視圖中，因此在不同的平臺上可以共享這些代碼（如HTML5、CSS和Javascript）。WebView就是混合型應用，其使用嵌入式的WebViews來渲染用戶界面，而這其中就可以使用HTML5、CSS和JavaScript進行定制化開發(fā)。

WebView應用在訪問設備上那些開箱即用的API時會有一些限制，需要額外的工作來實現(xiàn)與原生應用相同的功能，帶來的好處也是顯而易見的，這些應用天生就是跨平臺的，開箱即用可以大大節(jié)省開發(fā)時間?；旌闲蛻迷趦蓚€平臺上看起來是一樣的，但底層行為卻是不同的，這都取決于目標平臺的可用API。例如一個天氣應用的程序分別在兩個平臺上檢查當前位置的天氣服務API，根據(jù)每個平臺提供的數(shù)據(jù)返回不同的結果。

2.原生開發(fā)

原生應用指的是使用目標平臺（如安卓或iOS）的原生SDK開發(fā)的應用。這些代碼只為目標平臺所編寫，所以不能在不同的平臺上共享，而且用戶界面也是使用特定平臺的組件和庫來實現(xiàn)的。和混合應用相比，原生應用能提供更好的用戶體驗而且看起來也更加本地化，但它們的開發(fā)成本也更高。由于開發(fā)人員需要更多的時間來學習目標平臺的API，所以開發(fā)新功能就需要更長的時間。

三、跨平臺框架：Flutter和React Native

Flutter和React Native是當今最好的跨平臺框架之一。它們都使用原生的組件來提供可定制的、響應式的UI，同時可以在不同的平臺上共享代碼。Flutter框架由谷歌開發(fā)，而React Native框架則是由Facebook提供的。這些科技巨頭都擁有非常龐大的團隊，負責從SDK到文檔、技術支持等一切事務。雖然Flutter和React Native應用都是原生的，但它們比傳統(tǒng)的原生應用開發(fā)更具優(yōu)勢，因為它們可以跨平臺共享相當一部分代碼。根據(jù)Instagram的數(shù)據(jù)，通過React Native在iOS和安卓之間共享的代碼超過90%。

四、Flutter和React Native的歷史

Fluttter是在2016年10月的Dart開發(fā)者峰會上發(fā)布的，這個跨平臺的移動應用開發(fā)框架為開發(fā)者提供了工具，通過使用谷歌自己的Dart語言編寫一套代碼，可以同時為iOS和安卓構建原生應用。

相比2018年2月16日Flutter的第一個穩(wěn)定版本（1.0）問世，React Native起步比Flutter早一些。雖然它的第一個測試版本在2015年3月就發(fā)布了，然而直到2017年3月，才成功脫離測試階段。2017年9月5日，React Native在科技巨頭Facebook的強力支持下發(fā)布了1.0版本。雖然兩者出現(xiàn)時間都相對較晚，但并不影響各個公司對它們的喜愛，React Native已經被Facebook、Instagram、Airbnb和Uber等大公司使用，而Flutter也已經被寶馬、豐田、eBay以及谷歌自己的谷歌支付所使用。

五、Flutter和React Native的比較

Flutter和React Native最主要區(qū)別是，React Native并沒有編譯成原生的語言（如Java、Swift、Objective-C），而是簡單地運行其JavaScript代碼。而Flutter則將其Dart語言編譯成原生語言，這可能會影響性能。

另一個很大區(qū)別就是，React Native使用vanilla JavaScript（除了JSX）來編寫組件。鑒于React Native的動態(tài)特性，F(xiàn)acebook的開發(fā)人員建議使用Flow或TypeScript來編寫代碼。同樣對于Flutter，谷歌也推薦使用Dart來編寫代碼，因為它有自己的一套靜態(tài)類型。

在我們看來，決定如何選擇這兩種技術應該更多地基于自身的偏好，而不是它們的實際特點和性能。當然，能了解所有的編程范式就更好了，這樣你就可以輕松地掌握新的語言和框架，即使它們不是用你熟悉的語言編寫的。對于那些已經熟悉JavaScript（ES2015+）或TypeScript/Flow的程序員來說，React Native入門要容易得多，尤其對那些使用過React的開發(fā)者來說更加容易，因為React和React Native之間有大量的相似之處。JavaScript在移動開發(fā)領域仍有很大的市場份額，由于React Native和Flutter都允許選擇自己喜歡的編程語言，所以很難說哪一種會在2023年更受歡迎。

另外，還有其他一些可能影響選擇的重要因素，如：

• 公司對特定技術棧的偏愛。
• 開發(fā)者對某一語言/框架的熟悉程度。
• 具備使用特定技術所需技能的開發(fā)人員的可用性。

正如我們上面指出的，React Native和Flutter都將在2023年成為重要的參與者，所以最終哪個成為你的最佳選擇取決于你的長期目標。

六、跨平臺開發(fā)框架如何工作

盡管跨平臺移動應用開發(fā)框架有許多共同的概念和特性，但它們都有各自不同的目的。

React Native目的是結合React Web帶來的開發(fā)便利，并提供近乎原生應用的性能體驗。這個設計不是通過在iOS和Android之間使用一組共享組件實現(xiàn)，而是將完全獨立的UI封裝到一個JavaScript包中，這里面包含幾乎一半的應用程序代碼。Flutter的目的主要是為了滿足谷歌自身的需求，通過創(chuàng)建可在iOS和Android應用程序之間共享的可重復使用的UI組件，是將縮減開發(fā)周期與原生代碼性能結合起來的又一次嘗試，這也是為什么使用谷歌的Flutter開發(fā)要比React Native快得多。Flutter的設計理念也是讓應用開發(fā)變得更簡單、更容易。它使用Dart編寫代碼，這種語言可以在一個周末學會并在幾天甚至幾小時內精通，當然前提取決于開發(fā)者所掌握的技術棧。這就是為什么我們認為Flutter將成為那些需要在不犧牲性能或功能的情況下，需要快速創(chuàng)建大量原生移動應用程序的公司的首選移動開發(fā)框架。

七、構建移動應用又有了樂趣

當谷歌發(fā)布Flutter時，開發(fā)者被它在實踐中的表現(xiàn)所震驚，與其他的專門為構建跨平臺移動應用的技術相比Flutter的表現(xiàn)非常好。React Native在iOS和Android之間共享UI代碼的理念是一個偉大的創(chuàng)舉，但由于React Native固有的局限性，其所創(chuàng)建的應用程序不能像原生應用那樣表現(xiàn)出色。Flutter提供了許多你在當今任何其他工具中都找不到的好功能。

Dart是一種令人印象深刻的語言，它天生是為創(chuàng)建移動應用程序而建立的。Dart是目前構建Android和iOS應用程序的最快的語言，它使得構建高性能的UI組件變得更容易，有強大的IDE（集成開發(fā)環(huán)境）支持，且具備強大的自動完成功能，允許在不丟失應用狀態(tài)的情況下進行實時編碼原型設計，并最終強制使用面向對象的設計模式。擁有一個有主見的框架意味著谷歌將能夠為你做出許多重要的決定，同時使社區(qū)能夠專注于構建應用這件真正重要的事情上。

Flutter有一個完整的工具鏈和一套漂亮的類似Material Design的組件，這些開發(fā)者都可以在他們的應用程序中復用。谷歌還提供了一些與第三方庫的集成如：用于有效處理圖像的圖像處理庫、SQL數(shù)據(jù)庫（通過抽象進行訪問）和文本編輯器。所有這些都以一個內聚的軟件包形式呈現(xiàn)給開發(fā)者，其設計考慮到了速度、易用性、生產力和性能。

八、Flutter和React Native應用的優(yōu)缺點

使用Flutter創(chuàng)建的應用程序與原生應用程序沒有區(qū)別，它們具有相同的性能、外觀和體驗（除了一些特定平臺的風格）。在使用React Native構建應用程序時，人們通常抱怨的主要問題與它的運行時環(huán)境有關，這比為每個架構管理單獨的進程的問題更嚴重。這意味著你使用React Native盡管可以實現(xiàn)接近原生的性能，但無法達到純原生應用等同的性能。在支持現(xiàn)有的JavaScript代碼庫和允許iOS和Android應用之間重用共享的組件方面，F(xiàn)lutter并沒有像React Native那樣便捷。現(xiàn)在讓我們深入了解一下這兩個框架的技術利弊。

1.在原生性能方面的比較

React Native提供了一個改進的JavaScript虛擬機，它的JIT編譯器比V8速度更快。得益于它的預編譯框架，你可以自由地發(fā)布你需要的任何代碼，因為它將被編譯成一個本地可執(zhí)行文件。在實踐中開發(fā)React Native和純原生應用一樣快，因為它可以實現(xiàn)與iOS應用相同的功能，而不需要對iOS的構建設置進行任何修改。同樣Flutter也有自己的預編譯器，一旦你創(chuàng)建了自己的項目，它將為iOS和安卓發(fā)布優(yōu)化后的代碼。您無需像React Native那樣將你的代碼庫發(fā)布到應用程序的二進制中文件中，就能獲得原生的性能。

2.在應用程序大小方面的比較

React Native應用程序通常包含一個壓縮的約300kb的JavaScript運行時文件，盡管可以通過調整一些選項來降低文件大小，如Bypass filling（這將迫使React Native跳過填充其虛擬DOM的過程，從而造成與原生UI的差異），以及將useDeveloperMode設置為true（這將在內存中調整圖像大小并降低其質量）。Flutter提供了一個預編譯器，允許開發(fā)者只發(fā)送他們正在構建的應用程序所需的代碼庫，而不必與之捆綁任何組件。如果你愿意，可以在現(xiàn)有的JavaScript虛擬機內運行Flutter，這樣可以節(jié)省應用程序所需的空間。

3.最小所需SDK版本的比較

React Native通?？梢栽谌魏蝘OS 9+或Android 5.0+的SDK上構建，而不會存在任何問題。但為了達到最佳性能，你應該在發(fā)布時使用最新的可用SDK版本。

實際上，React Native應用可以在更早的iOS和Android SDK上構建，并可以在運行時提供一組有限的功能，但為了獲得所有的功能，你需要使用最新的SDK版本。

Flutter應用程序可以在Android 21 (Lollipop)或更新的版本上進行構建，我們同樣建議使用最新的SDK版本進行構建以獲得最佳性能。Flutter可以在iOS 8或更新的系統(tǒng)上運行，但鑒于蘋果已經廢棄了Flutter使用的大部分API，調用那些API可能會導致運行時崩潰。

4.在UI開發(fā)方面的比較

Flutter有自己的一套用于渲染用戶界面的組件，在構建Flutter應用程序時，你也可以重用現(xiàn)有的iOS或Android代碼。作為第三方庫可能更容易地重用現(xiàn)有的本地組件，所以將Flutter組件映射到現(xiàn)有的iOS和Android UI組件并不容易，但這仍是一項正在進行的工作。React Native則提供了一個橋接，允許你將現(xiàn)有的iOS和Android代碼作為JavaScript模塊進行重用，以及公開了一些API，作為手動創(chuàng)建本地UI組件和渲染它們的JavaScript代碼之間的橋梁。

5.在調試方面的優(yōu)缺點

React Native有自己的調試器，可以連接到你在iOS和Android上運行的應用程序，它為開發(fā)者提供了JavaScript虛擬機當前狀態(tài)的預覽，以及各種檢查內存使用情況或動態(tài)調整某些選項的工具。Flutter也提供了類似的調試器，除了提供渲染引擎當前狀態(tài)的預覽與React Native不同之外，其余都類似。

6.移動平臺間代碼重用的比較

React Native有自己的一套API，在開發(fā)iOS和Android時都可以使用。雖然大多數(shù)使用React Native的公司會先在一個平臺（通常是iOS）上開發(fā)他們的應用程序，然后再移植到另一個平臺，但如果愿意你也可以很容易的在iOS和Android應用程序里面編寫共享組件。Flutter應用程序是用特定平臺的代碼構建的，因此不可能在你的iOS和Android應用程序里共享任何代碼。然而，作為第三方庫可以使重用現(xiàn)有的本地組件變得更容易。

7.Flutter或React Native哪一個更容易學習？

React Native和Flutter都很容易學習（就API而言），但前提取決于開發(fā)者的專業(yè)知識。兩者都有一個龐大的、參與性強的開發(fā)者社區(qū)，可以給新的開發(fā)者提供幫助，并不斷創(chuàng)建新的工具和組件。對于一個幾乎沒有編碼經驗的全新開發(fā)者，我們可能會建議從React Native開始，因為它提供了一套預定義的組件，可以用來構建iOS和Android應用程序，這樣你就可以專注于學習一種API，而不必擔心要學習所有用于渲染視圖的API。而對于有一定編碼經驗的開發(fā)者，我們可能會推薦Flutter而不是React Native，因為Flutter提供的API更接近于iOS和Android。此外，F(xiàn)lutter背后的團隊非常注重Flutter提供的開發(fā)體驗，確保能夠與其他SDK（包括React Native）提供的開發(fā)體驗媲美。

8.2023年Flutter與React Native的對比

React Native于2015年問世，那時起已經被許多公司所使用。JavaScript變化非?？欤訰eact Native也隨著時間的推移不斷發(fā)展，而且在開源社區(qū)的貢獻下加入了很多新的功能。Flutter是一項較新的技術，如果你習慣了Android或iOS，開始可能會感到相當陌生。但谷歌為了使其更易入手付出了很多努力，因此大多數(shù)熟悉iOS或Android開發(fā)的人應該能夠很快掌握它。

九、結論

Flutter和React Native都是跨平臺應用開發(fā)的絕佳選擇。雖然它們有一些相似之處，但也有一些關鍵的差異是你需要知道的。為你的商業(yè)應用或初創(chuàng)應用選擇合適的跨平臺框架，主要取決于你的開發(fā)經驗、開發(fā)團隊，以及你的項目需要訪問哪些本地組件， 我們希望這篇文章能幫助你做出明智的選擇。

原文鏈接：https://dzone.com/articles/comparing-flutter-vs-react-native

譯者介紹

胥磊，51CTO社區(qū)編輯，某頭部電商技術副總監(jiān)，關注Java后端開發(fā)，技術管理，架構優(yōu)化，分布式開發(fā)等領域。