最近 「 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 自習室 入群"。
參考
- Flutter vs React Native comparison for Q1 2018
https://agileengine.com/flutter-vs-react-native-comparison/ - 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 - 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 等。每週都會有 原創 文章分享，我們的文章都會在公眾號首發。歡迎關注檢視更多內容。
