Flutter vs React Native，誰才是跨平臺應用開發的最佳利器？
隨著移動應用的需求越來越大，許多企業開始將焦點轉移到移動應用的開發上。通過引入新技術、新平臺和新框架，移動應用開發者能夠建立劃時代的移動應用。
近年來，跨平臺應用開發非常流行，通過跨平臺的應用開發者編寫一份程式碼就能同時為 Android、iOS、Windows 等多個平臺同時開發應用程式。
在眾多的開發利器中，React Native 是著名的跨平臺移動應用開發工具之一，它是由 Facebook 開發的，且是目前的最為活躍的開發者社群之一。
不過 Google 在 2017 年的 Google I/O 開發者大會上釋出了他們自己的軟體開發工具（SDK）：Flutter。今天，我們就來比較一下這兩個框架。
Flutter 是什麼?
Flutter 的設計目標是在 iOS 和 Android 系統上建立高質量介面，它是 Google 的移動開發框架。同時，它也是免費的開源工具，能和現有程式碼共同使用，甚至在最近越來越受歡迎。
Flutter 的優勢在於：
快速開發
Flutter 擁有熱載入功能，只需幾毫秒就能執行應用程式。它的自定義窗體功能也可以用來建立原生介面。
表述式、靈活的設計
快速交付的功能著重於原生的終端使用者體驗。多層的架構可以實現完全的定製化，從而得以實現靈活的設計和快速的渲染。
原生效能
窗體覆蓋了所有基本的平臺之間的差異，同時擁有滾動、導航、圖示和字型等功能，同時為 iOS 和 Android 提供了完整的原生效能。
React
React 是個 JavaScript 庫，其具有高效、靈活的特性，而且使用宣告式來編寫使用者介面。開發者可以通過小型、獨立的程式碼片段（所謂的“元件”）來構成複雜的 UI。
React 的功能
元件——能幫你在大型專案中維護程式碼。React 的核心就是元件。
單向資料流和 Flux——React 利用 Flux 實現了單向資料流，這是一種應用程式架構，能保證資料流是單向的。
Flutter 和 React Native 的比較
Flutter 架構
React Native 架構
React Native 的社群支援
React Native 由 Facebook 於 2013 年開發。最常見的問題的解決方案都列在了 React Native 的開發文件和指南中。社群論壇中還有許多開發者，對使用者每天遇到的問題做出了關鍵的貢獻，並輔助使用者解決這些問題。
通過閱讀貢獻者手冊，查閱 Roadmap，分析其他人的工作，你也可以為社群做出貢獻。你也可以尋找在社群中被詢問次數最多的、最流行的功能。
Flutter 的社群支援
Flutter 文件足夠讓你開始進行應用程式開發了。
Flutter Gallery 在其網站上演時了所有 Flutter 元件，你也可以參照 Flutter 的 GitHub 中的實現。
Flutter 的網路不像 React Native 那麼強大。但是，Google 的 Flutter 團隊提供的幫助非常好。
他們提供了許多方法讓你提交問題。
技術棧
React Native 是個 JavaScript 庫，而 Flutter 是個 SDK，使用的是完全不同的程式語言 Dart。
JavaScript
JavaScript 最初的建立目的只是 Web 開發，但現在已經有了大量的其他函式庫，已經變得非常龐大，很少有地方沒有它的身影。
React Native 將動態的 JavaScript 程式碼在執行時編譯成原生檢視。其餘的程式碼執行在應用程式內部封裝的虛擬機器內。
Dart
Dart 是個通用語言，由 Google 開發。它可以用來構建網站、伺服器、移動應用，也能用於物聯網裝置。
Dart 受到了許多語言的影響。最強的影響來自 Java。Java 程式設計師可以很容易注意到兩者之間的相似性。
Dart 是個面向物件的程式語言，支援抽象、封裝、繼承、多型等。
Dart 程式可以在以下兩種模式下執行：
檢查模式
這種模式會啟用動態型別和斷言。如果程式碼中提供了靜態型別，就可以開啟型別斷言。在開發和測試階段建議使用檢查模式，有助於捕捉程式碼中型別不匹配的錯誤。
生產模式
這是所有 Dart 程式的預設模式。它能讓程式執行得更快。
儘管 Dart 提供了很多社群支援，但它仍然比不過 JavaScript 等其他主流語言，因此連知道 Dart 的人都很少。
Flutter 的框架使用函式式反應式程式設計，它受到了 React 的啟發。
雖然 Flutter 是用 Dart 寫的，但它借鑑了 React 最好的功能，幫助開發者建立漂亮、跨平臺的移動應用。
React Native 的使用者介面
使用 React Native 的體驗很像使用不帶 CSS 框架的 HTML。
與 Flutter 應用不同，使用 React Native 時，必須使用一些第三方庫，因為 React Native 本身不提供UI元件
我們需要使用如 React Native、React Native Material Design、Shoutem 和其他 UI 庫。
Flutter 的使用者介面
Flutter 有自己的 UI 元件，其引擎能將元件渲染到 Android 和 iOS 平臺上。大多陣列件都符合 Material Design 的標準。
Flutter 內建的元件可以用來開發應用程式的介面。這些元件叫做窗體（widget）。這裡我們只需選擇正確的窗體並傳遞正確的屬性，就能獲得需要的介面。
Flutter 中的每個窗體都由自己的屬性，可以巢狀在其他元件中。窗體也能呼叫父元件的屬性。
在 React Native 中，使用原生模組和使用者介面元件只需橋接就可以。但在 Flutter 中無法這樣做，因為 Flutter 有自己的渲染引擎。
這裡是 Flutter 窗體（https://flutter.io/widgets/）的一些例子。
React Native 中的樣式
React Native 中的樣式用 JavaScript 定義。所有 React Native 的核心元件都支援一個名為 style 的屬性。
樣式名稱和值和 Web 上的 CSS 很相似。
唯一的區別就是，在 React Native 中的樣式名稱是用大小寫混合的。所以要定義背景色，需要使用 backgroundColor，而不是 background-color。
Flutter 中的樣式
Flutter 中的樣式用法跟 React Native 不太一樣。下面這段 React Native 程式碼定義了字型樣式和其他文字屬性，都由 CSS 處理。
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
如果用 Flutter 實現同一段程式碼，將會是這樣：
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View style={styles.greybox}>
<Text>Lorem Ipsum</Text>
</View>
);
}
}
const styles = StyleSheet.create({
greybox: {
backgroundColor: #e0e0e0,
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
Flutter 的優點和缺點
我們來更仔細低看看它的優缺點。
使用 Flutter 的五個優點
寫程式碼更快
Flutter 意味著更快、更動態的移動應用開發。程式碼中的改變可以立即在應用程式中看到，這就是所謂的熱載入，只需花幾毫秒，能幫助開發者更快地新增功能、修復 Bug 和試驗各種新東西。
熱載入也十分適合開發者和設計師之間的合作，可以試驗各種應用程式的外觀並立即看到效果。
換句話說，Flutter 可以讓設計師和測試者一起與開發者在 UI 上工作。
絕大多數程式碼變更都可以熱載入。但有一些變更需要重新啟動應用，這些是熱載入的限制。
相比之下，在原生應用程式開發時，整個專案需要重新構建，這需要花很長時間，有時甚至會花上幾分鐘。