Flutter KO React Native? 讓時間去決定吧...

最近 「 Flutter 自習室 」常常有同窗問，Flutter 和 React Native 有什麼區別？因爲 Flutter 是 Google 對標 React Native 的跨平臺移動開發方案，因此這二者之間仍是有許多可比性的。

固然因爲二者推出的時間相隔大概 2 年，而 Flutter 還處於起步階段，因此當前階段，這二者的比較是不對等的。也許再過兩年，Flutter 成長起來後，二者的比較會更可靠一些。不過既然有疑問，因此這裏就整理一下目前網上的一些資料，來作個簡單的對比。

咱們先來看個對照表：

下面咱們就根據這張對照表，展開簡要說明一下。

UI 構建方式

這兩個平臺在用戶界面的構建方式差別上很大。

React Native 最終是以原生的 iOS 或 Android 組件來渲染界面。在某些狀況下，咱們可使用 Native Module 的方式來自定義組件，在 JS 端經過 NativeModules 來引用 Native 組件。

而 Flutter 是有本身專屬的一套 Widget，並經過本身的渲染引擎來繪製界面。Android 上使用 Material Designed Widget，iOS 上使用 Cupertino Widget。

Flutter 構建 UI 的方式仍是讓人心情複雜。其專有的 Widget 在自定義 UI 中增色很多，Flutter 團隊也承諾將增強與 Native 組件的互操做性。不過，因爲 Flutter 還在起步階段，其 Cupertino 庫還缺乏不少基本組件，而 React Native 在這一方面已經比較成熟了。

Native 視覺和感覺

React Native 和 Flutter 都承諾提供原生組件的感觀。在這一方面，對 React Native 的正面評價已經不少了，對 Flutter 的評價卻不多，並且有些仍是負面評價。

固然，Flutter 開發社區還須要積累更多的最佳實踐，以提供更好的跨平臺交互體驗。不過，如今 React Native 社區已經比較成熟了，而 Flutter 又是對標 React Native 的，因此這方面能夠參考 React Native 社區的發展。

性能

從技術上來說，Flutter 的運行速度應該更快，由於 Flutter 沒有與本地組件交互的 Javascript Bridge。那是否就意味着 Flutter 在性能上就必定優於 React Native 呢？事實經驗是：No。

目前 React Native 構建的 App 在性能上的表現已經很不錯了，甚至能夠和原生 App 媲美。在大部分狀況下，React Native 都能平滑地運行，在不少具備挑戰性的任務中（60 fps）都有很好的解決方案。

固然，Flutter 將 60 fps 做爲目標的。

成熟度

React Native 是在 2015 年發佈的，通過 2 年多的發展，已經比較成熟，雖然至今沒有發佈 1.0 版本。React Native 社區發展也很成熟，而且爲 React Native 社區貢獻了大量的開源代碼。

而 Flutter 是在 2017 年 5 月發佈的，而 Beta 版本也是今年 3 月份才發佈，社區也剛剛發展，特別是在國內。因此，Flutter 還須要時間，才能成爲跨平臺移動開發普遍採用的解決方案。

JAVASCRIPT VS DART

毫無疑問，在編程語言之間進行選擇是一個巨大的決定因素。從某種意義上講，Dart 和 Javascript 不是一個量級的。

截至 2018 年，JavaScript 是 GitHub 上最流行的語言。從前端到後端，從 PC 到移動端，Javascript 都表現出了其強大的實力。而 Dart，筆者在以前從未據說過這門語言（孤陋寡聞了），在 Google 以外，Dart 並不流行。

有個笑談，爲何 Flutter 會選擇 Dart？由於 Dart 團隊就在 Flutter 團隊隔壁，有問題隨時能夠問。固然笑談歸笑談，Dart 語言自身的特性，類型安全、富有表現力，對標 Javascript，對移動開發人員，特別是有 React Native 和 Javascript 基礎的開發人員來講，仍是很友好的，學習曲線相對平緩。

至於 Flutter 爲何選擇 Dart，能夠參考 爲何Flutter會選擇 Dart ？ http://www.infoq.com/cn/articles/why-flutter-uses-dart

行業使用

React Native 是由 Facebook 推出的，最初在 Facebook 本身的項目中使用，然後很多主流的應用程序也採用了 React Native 的方案，以下面幾個：

國內不少公司也對 React Native 作了不少研究，並有相應的產出，如一些基於 React Native 發展出來的跨三端的技術。

而 Flutter 在這方面卻乏善可陳，拿得出手的並很少。有一款應用 Hamilton，是目前應用 Flutter 最成熟的應用，另外開源中國也基於 Flutter 開發了一個客戶端，而且在 Github 上開源 https://github.com/yubo725/FlutterOSC，你們能夠有興趣研究一下。

生產效率

React Native 受歡迎的很大一個緣由是它的生產效率。而 Flutter 的目標之一也是高效的開發。除了跨平臺的優點以外，還有一些其它生產效率方面的特性，咱們也能夠來比較一下。

Hot Reload

若是你是 Native 開發，必定對 Android 和 Xcode 的編譯效率無力吐槽。可能改幾行代碼，開始編譯，而後就能夠去接咖啡了，回來也許剛恰好，程序跑起來了，甚至更糟。跑起來後，還得從頭走一下流程，進到你要調試的頁面。

而 Flutter 和 React Native 的一大優點正是在這一方面：它們都支持 Hot Reload。修改代碼後，只須要從新加載資源，並且能夠保持在同一頁面上，甚至於保留原來的表單輸入。

配置和設置

相較於 React Native，Flutter 的設置和配置更加簡單。Flutter doctor 能夠自動檢查系統問題，整個設置過程更直接。

工具

React Native 的各類 IDE 工具已經很齊全，因此 Flutter 在這方面沒有什麼優點。不過，Flutter 的表現也不錯，支持 IntelliJ、Android Studio、Visual Studio Code，且各類相關的插件也在不斷髮展中。

硬件相關的 API

React Native 如今已經提供了各類硬件相關的 API，如 Wi-Fi、GEO、相機、傳感器等，這些第三方的解決方案都相對成熟。不過，React Native 的問題在於圖形繪製這一塊。若是咱們想自定義一些圖形繪製相關的組件，就必然會涉及到 Native 代碼。

而 Flutter 是自有的渲染引擎，能夠更靈活的來定製各類圖形組件。同時，除了藍牙和 NFC 外，其它硬件相關的 API 也正在不斷髮展。從這方面講，Flutter 後面或許會勝出。

生命週期管理和優化

生命週期的管理對於前端各個領域來講，也是一個大話題。在這一方面，React Native 作得更好，並且如今針對 React Native 的狀態管理框架也不少。而 Flutter 目前只能使用 Widget 來繼承實現無狀態和有狀態組件，同時沒有工具來明確地保存應用程序的狀態。不過，相信後面各類框架也會不斷出現。

代碼結構

在這不得不吐槽一下，Flutter 中經過代碼來構建一個頁面的結構和佈局樣式確實有點混亂。相比而言，React Native 中經過 JSX ，以聲明式的結構來描述一個頁面結構，同時分離頁面結構和樣式的方式，開發起來更加舒服一些。

社區

做爲一個新生兒，Flutter 在開發者社區中獲得普遍的關注。截止目前，Flutter 在 Github 上的 star 數已到 24k ，stackoverflow 上相關的問題數也不少。固然，比起 React Native 來，Flutter 仍是顯得比較稚嫩。

不過，每一種新技術，都有一個成長過程，並且都會有本身的支持者和反對者。Flutter 要走的路，React Native 也走過。因此，給 Flutter 一些時間。

文檔與路線圖

Flutter 和 React Native 都沒有明確的路線圖。不過，React Native 有一個比較活躍的 Github 博客 http://facebook.github.io/react-native/blog/，每個月會有一些更新。而 Flutter 也維護了一個相關里程碑 https://github.com/flutter/flutter/milestones的頁面，在這裏能夠了解 Flutter 的進展信息。

文檔方面，Flutter 仍是更有優點的，文檔很清楚。而 React Native 的文檔感受只是寫給 React 開發者的，不懂的去看 React 的文檔，特別是對不少組件的描述，都不是很細緻，但願這個後面能改善吧。

小結

若是真要作比較，現階段 React Native 無疑贏家。不過我以爲這種比較更像是大人和小孩之間的比較，畢竟 Flutter 處於起步階段。因此，仍是把裁判權留給時間吧。

固然，Flutter 還有些潛在的問題，是須要咱們關注的：

• Dart 相對 Javascript 來講，接受度仍是過低；
• 業界對 Flutter 的態度；
• 若是你瞭解過 Google Graveyard，在採用 Google 的新技術以前，就可能會再三考慮。

最後，「 小集 」團隊在 Github 上開了一個 repo，來收集國內關於 Flutter 的開發資源 https://github.com/awesome-tips/flutter-resources，歡迎你們一塊兒來維護。同時咱們開通了微信羣 「 知識小集 · Flutter 自習室 」，有興趣的小夥伴能夠先加好友 coldlight_hh (南峯子) 或者 bob5201215 (zb)，而後邀請您入羣。加好友時請註明 "Flutter 自習室 入羣"。

參考

1. Flutter vs React Native comparison for Q1 2018 https://agileengine.com/flutter-vs-react-native-comparison/
2. Flutter vs React Native – What Would You Prefer for Your Next Hybrid Mobile App? https://dev.to/vipinjain/flutter-vs-react-native--what-would-you-prefer-for-your-next-hybrid-mobile-app-2i3m
3. Flutter vs React Native - What You Need To Know https://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3c90b

知識小集是一個團隊公衆號，主要定位在移動開發領域，分享移動開發技術，包括 iOS、Android、小程序、移動前端、React Native、weex 等。每週都會有 原創 文章分享，咱們的文章都會在公衆號首發。歡迎關注查看更多內容。