Flutter vs React Native：移動應用開發選擇什麼？

已發表: 2018-05-18

Facebook 的 React Native 和 Google 的 Flutter 最近引起了巨大的轟動，同時在競爭中相互競爭以決定哪個框架是最好的。 在本文中，我們將研究它們如何在行業中相互競爭。

什麼是顫振？
什麼是 React Native？
Flutter 和 React Native 的區別：詳圖。
用於 React Native 的 Flutter
Flutter 有什麼新功能？
React Native 有什麼新功能？
關於 Flutter 與 React Native 辯論的常見問題。

曾經有一段時間，移動應用程序開發行業僅限於為 iOS 和 Android 單獨開發應用程序，但現在情況已經發生了 100% 的轉變。

今天，投資一家移動應用程序開發公司，該公司擅長在一個代碼庫上開發可在 Android 和 iPhone 上運行的單一應用程序，已成為時尚的商業議程。

當 Facebook 在 2015 年推出並普及其跨平台應用程序開發框架 React Native 時，每一個跨平台應用程序開髮指南都表明“趨勢”已成為主流。

從那時起，企業——為了利用React Native 應用程序開發必須提供的成本和開發優勢——在獲得了對“ React Native 是適合你的下一個平台”這個問題的關注利潤的答案後，一直在轉向該框架應用程序？ '。從而進一步加強了React Native 與 Native的爭論。

因此，毫無疑問，React Native 變得流行起來，LinkedIn、Instagram、Walmart 等熱門照片都轉移到了這個平台上。

2018 年 3 月的人氣受到了影響，相當有影響力。

谷歌在世界移動通信大會上宣布了自己的跨平台 SDK 的 beta 版本，稱為 Flutter。而且，在短短幾個月內，使用 Flutter 的移動應用程序開發已經開始推動 React Native 的風頭，這得益於 Google 以支持 AndroidX等功能的形式賦予它的力量、遊戲控制器等。

現在回到今天。

目前的情況是，Flutter 和 React Native 已經進入了一場公開的牽引力和大規模採用戰爭，並且任何一個框架的搜索查詢都返回了結果顯示 - “ React Native vs Flutter 2019 ”。

讓我們回顧一下這兩個框架所代表的意義，以便為比較成為為 iOS 和 Android 構建應用程序的最佳原生解決方案奠定基礎。

什麼是顫振？

Flutter Engine 是當今業界領先的開源跨平台應用程序開發框架之一。它由谷歌於 2017 年開發。

現在讓我們研究一下 Flutter 的優缺點，以便對框架有一個更清晰的認識。

構建跨平台應用程序具有以下優勢：

完整的開發生態系統
高度可定制
谷歌讓它非常可靠
熱重載功能
開源且免費使用

它也有一些缺點，例如：

應用規模大
依賴原生工具和技術來構建應用程序

借助該框架製作的應用程序包括——阿里巴巴、Hookle、Topline、OfflinePal、Hamilton 等。

什麼是 React Native？

它是 Facebook 於 2015 年開發的開源框架，作為自己的跨平台應用程序開發技術。除了構建移動應用程序所需的本機平台功能外，它還允許開發人員使用 React 和 JavaScript。

它具有一系列好處，例如：

原生 UI 組件的實現
現成的組件
允許訪問本機功能
熱重載
高度可靠
平台特定代碼
開源
用於 Web 功能的 React Native

但是跨平台的移動應用開發框架也有一些缺點，包括：

非無縫導航
複雜的用戶界面

使用 React Native 製作的應用包括：Facebook、Skype、Artsy、Vogue、Bloomberg 和 Tesla 等。

解剖已經完成到這樣一個程度，我們能夠繪製一個比較信息圖來了解它的最佳跨平台應用程序開發。

Flutter 和 React Native的區別：詳圖

框架成熟度

React Native 於 2015 年首次發布，而 Flutter 的第一個 Beta 版本是在 2 月 26 日至 3 月 1 日舉行的移動世界大會上發布的。所以，說到成熟度，Flutter 不如 React Native 成熟。由於仍處於起步階段， Flutter 應用程序開發還需要一段時間才能成熟。

反應原生- 1

顫振- 0

編程語言

React Native 使用 JavaScript 構建跨平台應用程序。除了其他著名的 JavaScript 框架外，它主要與 React 一起使用。這使得 Web 開發人員可以非常輕鬆地開始他們的移動應用程序之旅。

另一方面，Flutter 使用 Dart 編程語言。該語言於 2011 年由 Google 推出。它使用了許多面向對象的概念，這些概念相當容易學習和入門。

但是，看看 JavaScript 是如何成為開發人員開始他們旅程的語言的，React Native 很容易這一事實讓它得到了更多的分數。

反應原生- 1

顫振- 0

安裝

React Native 框架是通過 Node Package Manager (NPM) 安裝的。對於具有 JavaScript 知識的開發人員來說，安裝過程非常簡單。

Flutter 是通過從 Github 下載特定平台的二進製文件來安裝的。對於 macOS，必須下載一個額外的 flutter.zip 文件並將其添加為 PATH 變量。

雖然 Flutter 框架和 React Native 都缺乏針對操作系統的原生包管理器的單線安裝，但 Flutter 安裝需要一個額外的步驟。因此，重點在於 React Native。

反應原生- 1

顫振- 0

配置和設置

與 React Native 相比，Flutter 的設置過程要簡單得多。 Flutter 提供了對系統問題的自動檢查功能，而 React Native 在很大程度上忽略了這一點。

顫振- 1

反應本機- 0

技術架構

React Native 架構依賴於 JS 運行時環境架構，稱為 JavaScript 橋。它使用 Facebook 的 Flux 架構。另一方面，Flutter 使用 Dart 框架，它不一定需要與本地模塊通信的橋樑。

由於 Flutter 引擎在框架本身中自帶了很多原生組件，並且不需要與原生組件通信的橋樑，所以這裡的重點是 Flutter。

顫振- 0

反應原生- 1

用戶界面

在用於 UI 開發的構建塊方面，Flutter 應用程序開發服務和它們的 React Native 對應物都有明顯的不同。一方面，React Native 在第三方或自定義組件的幫助下利用原生 Android 和 iOS 組件，而 Flutter 使用 100% 定制的專有小部件運行。

這些小部件在 Google 的 Material Design 和 Apple 的 Cupertino 中都有，這使得 UI 成為Flutter 是否取代 React Native的可能因素之一。

反應本機- 0

顫振- 1

原生外觀

原生外觀和感覺是用於移動應用程序開發的 Flutter 和 React Native 作為他們的 USP 推廣的東西。雖然作為 React Native Development 標誌的性能可供全世界窺探和探索，但對於 Flutter 來說，同樣不能保證。

公司聘請 Flutter 開發人員的原因是其無需任何第三方組件即可使用設備的核心功能的特性，在開發適用於 iOS 和 Android 的原生外觀和感覺應用程序的旅程中走得更遠。

反應原生- 1

顫振- 1

工裝

在工具方面，Flutter 無法與 React Native 相提並論。由於 Flutter 至少有 3 年的歷史，支持它的 IDE 和工具的數量要多得多。

但是，Flutter 框架絕對可以誇耀它與 Visual Studio Code、IntelliJ idea 和 Android Studio 的兼容性。此外，Flutter 的調試器、Dart linter、自動格式化、代碼分析器和自動格式化工具也獲得了一些非常好的評價。

反應原生- 1

顫振- 0

開發人員的生產力

對於擁有 JavaScript 專業知識的開發人員來說，React Native 非常簡單。它帶有熱重載功能，可以在很大程度上節省開發人員的時間。此外，開發人員甚至可以自由使用他們選擇的任何 IDE 或文本編輯器。

Flutter 還帶有熱重載功能。但是，當開發人員必須學習和使用新的 Flutter 概念時，學習曲線會稍微大一些。此外，作為新手的 Dart 缺乏對許多文本編輯器和 IDE 的支持，這降低了開發人員的工作效率。

React Native 更加成熟，在語言特性和 IDE 方面為Flutter 應用開發公司提供了更多的開發者支持。為此，得分歸於 React Native。

反應原生- 1

顫振- 0

文檔

雖然 React Native 文檔處於混亂狀態，但這是一個高度開源的框架，但它有很多東西要從 Flutter 文檔中學習。

谷歌以其清晰、詳細和格式良好的文檔而聞名，並且通過 Flutter，他們延續了人們的期望。

當您查看2019 年 Flutter 與 React Native的當前比較時，您會發現 Flutter 落後了，而且確實是。但情況將會改變。

Flutter 在很短的時間內就開始受到商家的廣泛關注，實際上當你查看他們的 Showcase 頁面時，你會發現使用 Flutter 製作的應用屬於復雜類別，正在使用多人同時進行。

再加上他們不斷添加到其產品組合中的庫，以及現場文檔，您將獲得一個準備好迎接跨平台世界的框架。

事實上，谷歌本身並沒有迴避正面挑戰 Facebook。

如果你錯過了 Flutter 的 React Native 深度文檔，這裡有一個總結版本。

用於 React Native 的 Flutter

Flutter for React Native 是 Google 的文檔，可幫助開發人員將當前的 React Native 知識應用於開發 Flutter 應用程序。

該文檔詳細介紹了創建新的 Flutter App 的過程。這個鏈接特別解釋了 react native 的顫振，該頁面旨在表明任何已經在 react native 上工作的開發人員都可以輕鬆地打開 Flutter。

該文檔明確邀請iOS 和 Android 應用程序開發人員脫離 React Native 並體驗 Flutter 的易用性和靈活性。

從表面上看，指導開發人員從 React Native 切換到 Flutter 的文檔並不是谷歌試圖在大規模採用競賽中超越 React Native 的唯一方式。在跨平台 SDK 生態系統中添加 Material Theming 和 Cupertino 小部件的舉措為使用 Flutter SDK 開發的應用程序添加了全新的富有表現力的用戶界面，這是 React Native 仍然缺乏並依賴於其他設計工具包的東西。

顫振- 1

反應本機- 0

應用性能

談到Flutter 與 React Native 的性能比較，Flutter 奪冠。它比它的 React Native Development 對應物快得多。由於沒有用於啟動與設備原生組件交互的 JavaScript 橋接器，因此開發速度和運行時間會大大加快。

再加上 Flutter 將動畫標准設置為 60fps，這是其高性能的明顯標誌。最後，由於 Flutter 被編譯為 Android 和 iOS 的原生 ARM 代碼，性能是它永遠不會面臨的一個問題。

反應本機- 0

顫振- 1

生命週期管理

一般來說，React Native 在簡化應用程序生命週期處理和優化方面往往做得更好。 Flutter 只為您提供了使用小部件繼承的範圍，它只允許無狀態和有狀態條件，減去任何用於顯式保存應用程序狀態的工具。

反應原生- 1

顫振- 0

代碼重用

React Native 使您能夠編寫一次代碼並將其發佈到任何地方，同時接受平台差異。這意味著，有時開發人員可能不得不查看他們在哪個平台上運行並在平台的基礎上加載不同的組件集。

Flutter 的代碼庫可重用性更高。它允許定義單個 UI 小部件樹，然後重用定義的邏輯，這樣就不必做太多的區分。

對於 Flutter 提供的易用性，重點在於框架。

反應本機- 0

顫振- 1

構建和發布自動化幫助

Flutter 相對於 React Native 的一個顯而易見的好處是它在構建和發布方面的自動化幫助。 React Native 官方文檔沒有提供任何在 App Store 上部署 iOS 應用程序的自動化方式。它確實提供了從 Xcode 部署應用程序的手動過程。此外，React Native 依賴第三方庫來構建和發布自動化。

Flutter 的核心功能帶有強大的命令行界面。它允許開發人員在命令行工具的幫助下開發應用程序二進製文件。

Flutter 帶有一個驚人的自動化工具並用於從命令行部署應用程序這一事實使其在競爭中領先於 React Native。

顫振- 1

反應本機- 0

測試支持

在JavaScript 框架上，只有少數單元級測試框架可用於 React Native。同樣，當您必須集成時，React native 也沒有官方支持。有一些第三方外觀，如 Detox 和 Appium 可用於測試應用程序，但官方不支持它們。

Flutter 提供了廣泛的測試功能，用於在單元、集成和小部件級別測試應用程序。它甚至帶有很棒的文檔。

測試支持的程度清楚地突出了 Flutter 相對於 React Native 的優勢。

反應本機- 0

顫振- 1

CI/CD 和 DevOps 支持

React Native 在CI 和 CD上沒有任何官方文檔。另一方面，Flutter 有一個完整的部分，其中包括幾個鏈接，使為 Flutter 應用程序添加 CI/CD 成為一個非常簡單的過程。

顫振- 1

反應本機- 0

社區支持

React Native 於 2015 年推出，隨著時間的推移已經廣受歡迎。它得到了一個龐大的社區的支持，該社區在全球範圍內舉辦了多次會議。 Flutter 雖然得到了開發者社區的大量關注，但仍然有時間達到大規模的社區備份，例如React Native 應用程序開發公司。

由於 Flutter 社區中可供開發人員使用的資源仍然相當少，這清楚地證明了 React Native 相對於 Flutter 的優勢。

反應原生- 1

顫振- 0

人氣

在 React Native 和 Flutter 之間，React Native 開發人員的數量甚至在其上運行的應用程序數量都比 Flutter 多得多。但是，這一差距正在迅速填補。根據Stack Overflow 的 2019 年開發者調查，Flutter 被評為最受喜愛的語言，超過 75.4% 的人對框架感興趣，而 62.5% 的開發者對 React Native 感興趣。

看到這兩個框架如何獲得牽引力，很難評論誰在這兩個方面都更好。

反應原生- 1

顫振- 1

行業採用

由於 Flutter 在跨平台行業中相當新，因此採用 SDK 開發跨平台應用程序的企業數量非常少。而另一方面，使用 react native 進行應用程序開發的好處在於，使用該框架開發的應用程序的展示頁面要高得多。

然而，事實仍然是，即使是新品牌，與他們合作的Flutter 應用程序構建公司，也已經在 SDK 上推出了像 Google AdWords 或 Hamilton Musical 這樣相當複雜的應用程序，甚至是像阿里巴巴這樣的電子商務巨頭。

反應原生- 1

顫振- 0

進一步推動Flutter vs React Native 2019大火的是兩個頂級跨平台工具引入的新增功能。

從 2018 年到現在，尤其是在2019 年的 Google IO 活動公告之後，這兩個領域都帶來了許多新的變化，這些變化已經為激烈的競爭鋪平了道路。

讓我們看看 2019 年 Flutter 和 React Native 有哪些新變化。

Flutter有什麼新功能？

自從 Flutter 的第一個 beta 版本以來，該框架在性能能力和採用率方面一直在增長。

Flutter 於2019 年7 月發布了1.7 版本，其中包含大量新功能和改進，包括：-

Android X 支持——這使得Flutter 應用程序開發人員可以在不影響向後兼容性功能的情況下更新他們設計的 Android 應用程序。

OpenType 豐富的排版功能——Flutter 正在發布一組新的排版功能，如表格和舊式數字、斜線零、樣式集等，這將增強應用程序的 UI 體驗。

此外， Flutter for Web也已推出，重點是讓 Flutter 超越智能手機，進入 Chromebook、Windows 和 Mac。它使使用 Flutter 開發桌面應用程序成為現實。這總體上給人的印像是，Flutter 的未來範圍更大，應該在 2019 年被 Android 和 iOS 開發者考慮。

2019 年以Flutter 發布 1.12 版本結束。在Flutter Interact 活動中，該版本發布了多項新功能和改進，重點關注環境計算。

除此之外，他們還進行了其他幾項改進，例如：

飛鏢 2.7
修改後的 DartPad
測試版網絡支持
macOS 桌面支持
添加到應用程序更新
新的谷歌字體包
iOS 13 暗模式支持

React Native 有什麼新功能？

去年 11 月，React Native 還為 2018 年和 2019 年制定了路線圖，這使得在 React Native 中構建移動應用程序的整個事件變得更加令人興奮。

列表中添加的元素都是為了重新定義 React Native 所代表的東西。

他們計劃：

使 API 穩定
創建更好的 GitHub 存儲庫
更好的文檔
React Native 的表面積被未使用和非核心組件移除
計劃改進對開源社區中著名的工具和平台的支持。
Facebook 將通過公共 API 使用 React Native 以減少重大更改的實例。

除此之外， React Native 0.60 於2019 年7 月推出，具有自己的一系列新變化，例如：-

新屏幕 - 引入了一個新屏幕，顯示相關說明，如編輯 App.js、文檔鏈接、調試菜單的過程等。這被社區認為是為了提高 React Native 的用戶友好性和流行度而不是 Flutter 的努力。

支持 Android X - 類似 Flutter，React Native 也將支持 AndroidX（Android 擴展庫）。這意味著無論您選擇 React Native 還是 Flutter，AndroidX 都將成為您移動應用程序開發過程的一部分。

2019 年 9 月， React Native 推出了 0.61 版本，擁有全新的重載體驗，稱為快速刷新。

在此版本中，實時重新加載和熱重新加載功能已合併為一個稱為快速刷新的功能。

以下是定義 React Native 0.61 特性的原則：

它完全支持現代 React
它在拼寫錯誤後恢復，並在必要時回退到完全重新加載。
它不執行任何侵入性代碼轉換。

除了快速刷新之外，他們還進行了其他重大改進，例如：

修復了 use_frameworks！ CocoaPods 支持
添加了 useWindowDimensions 鉤子
React 已升級到 16.9

隨著這些變化現在被引入或準備添加到 Flutter 和 React Native 生態系統中，戰爭只會變得更加激烈。

總而言之，Flutter 需要一段時間才能超越 React Native 隨時間積累的流行度。宣布 Flutter 是移動應用程序開發的未來還需要時間，但只要給它時間，它就會在 React Native 的用戶群中跳來跳去。

關於 Flutter 與 React Native 辯論的常見問題

Q. 在 Flutter 和 React Native 之間，2020 年該選哪一個？

很難說，因為這兩個框架都做得很好。因此，我建議根據本文中共享的比較因素做出決定。

問：flutter 會取代 react native 嗎？

是的，Flutter 將取代 React Native，成為未來跨平台開發的統治者。

Q. Flutter 有多受歡迎？

儘管 Flutter 在市場上很新，但在市場上已經贏得了極大的歡迎。 Reinvently、Hamiliton、Topline 和 Google Ads 等各種流行品牌都採用了 UI 框架。

問：React Native 是否仍處於測試階段？

不它不是。

Q. 為什麼 Flutter 比 React Native 更好？

在 Google 的支持下，Flutter 提供了比 React Native 更多的原生體驗，並且不太依賴第三方庫來引入新功能。這讓 Flutter 在 React Native 上佔了上風