隨著移動應用的需求越來越大，許多企業開始將焦點轉移到移動應用的開發上。通過引入新技術、新平臺和新框架，移動應用開發者能夠創建劃時代的移動應用。
近年來，跨平臺應用開發非常流行，通過跨平臺的應用開發者編寫一份代碼就能同時為 Android、iOS、Windows 等多個平臺同時開發應用程序。
在眾多的開發利器中，React Native 是著名的跨平臺移動應用開發工具之一，它是由 Facebook 開發的，且是目前的最為活躍的開發者社區之一。
不過 Google 在 2017 年的 Google I/O 開發者大會上發佈了他們自己的軟件開發工具（SDK）：Flutter。今天，我們就來比較一下這兩個框架。
1.Flutter 是什麼?
Flutter 的設計目標是在 iOS 和 Android 系統上創建高質量界面，它是 Google 的移動開發框架。同時，它也是免費的開源工具，能和現有代碼共同使用，甚至在最近越來越受歡迎。
Flutter 的優勢在於：
- 快速開發
Flutter 擁有熱加載功能，只需幾毫秒就能運行應用程序。它的自定義窗體功能也可以用來創建原生界面。
- 表述式、靈活的設計
快速交付的功能著重於原生的最終用戶體驗。多層的架構可以實現完全的定製化，從而得以實現靈活的設計和快速的渲染。
- 原生性能
窗體覆蓋了所有基本的平臺之間的差異，同時擁有滾動、導航、圖標和字體等功能，同時為 iOS 和 Android 提供了完整的原生性能。
2.
React
React 是個 JavaScript 庫，其具有高效、靈活的特性，而且使用聲明式來編寫用戶界面。開發者可以通過小型、獨立的代碼片段（所謂的“組件”）來構成複雜的 UI。
3.
React 的功能
- 組件——能幫你在大型項目中維護代碼。React 的核心就是組件。
- 單向數據流和 Flux——React 利用 Flux 實現了單向數據流，這是一種應用程序架構，能保證數據流是單向的。
4.Flutter 和 React Native 的比較
5.Flutter 架構
6.React Native 架構
7.React Native 的社區支持
React Native 由 Facebook 於 2013 年開發。最常見的問題的解決方案都列在了 React Native 的開發文檔和指南中。社區論壇中還有許多開發者，對用戶每天遇到的問題做出了關鍵的貢獻，並輔助用戶解決這些問題。
通過閱讀貢獻者手冊，查閱 Roadmap，分析其他人的工作，你也可以為社區做出貢獻。你也可以尋找在社區中被詢問次數最多的、最流行的功能。
8.Flutter 的社區支持
Flutter 文檔足夠讓你開始進行應用程序開發了。
Flutter Gallery 在其網站上演時了所有 Flutter 組件，你也可以參照 Flutter 的 GitHub 中的實現。
Flutter 的網絡不像 React Native 那麼強大。但是，Google 的 Flutter 團隊提供的幫助非常好。
他們提供了許多方法讓你提交問題。
9.技術棧
React Native 是個 JavaScript 庫，而 Flutter 是個 SDK，使用的是完全不同的編程語言 Dart。
10.JavaScript
JavaScript 最初的創建目的只是 Web 開發，但現在已經有了大量的其他函數庫，已經變得非常龐大，很少有地方沒有它的身影。
React Native 將動態的 JavaScript 代碼在運行時編譯成原生視圖。其餘的代碼運行在應用程序內部封裝的虛擬機內。
11.Dart
Dart 是個通用語言，由 Google 開發。它可以用來構建網站、服務器、移動應用，也能用於物聯網設備。
Dart 受到了許多語言的影響。最強的影響來自 Java。Java 程序員可以很容易注意到兩者之間的相似性。
Dart 是個面向對象的編程語言，支持抽象、封裝、繼承、多態等。
Dart 程序可以在以下兩種模式下運行：
- 檢查模式
這種模式會啟用動態類型和斷言。如果代碼中提供了靜態類型，就可以打開類型斷言。在開發和測試階段建議使用檢查模式，有助於捕捉代碼中類型不匹配的錯誤。
- 生產模式
這是所有 Dart 程序的默認模式。它能讓程序運行得更快。
儘管 Dart 提供了很多社區支持，但它仍然比不過 JavaScript 等其他主流語言，因此連知道 Dart 的人都很少。
Flutter 的框架使用函數式反應式編程，它受到了 React 的啟發。
雖然 Flutter 是用 Dart 寫的，但它借鑑了 React 最好的功能，幫助開發者建立漂亮、跨平臺的移動應用。
12.React Native 的用戶界面
使用 React Native 的體驗很像使用不帶 CSS 框架的 HTML。
與 Flutter 應用不同，使用 React Native 時，必須使用一些第三方庫，因為 React Native 本身不提供UI組件
我們需要使用如 React Native、React Native Material Design、Shoutem 和其他 UI 庫。
13.Flutter 的用戶界面
Flutter 有自己的 UI 組件，其引擎能將組件渲染到 Android 和 iOS 平臺上。大多數組件都符合 Material Design 的標準。
Flutter 內置的組件可以用來開發應用程序的界面。這些組件叫做窗體（widget）。這裡我們只需選擇正確的窗體並傳遞正確的屬性，就能獲得需要的界面。
Flutter 中的每個窗體都由自己的屬性，可以嵌套在其他組件中。窗體也能調用父組件的屬性。
在 React Native 中，使用原生模塊和用戶界面組件只需橋接就可以。但在 Flutter 中無法這樣做，因為 Flutter 有自己的渲染引擎。
這裡是 Flutter 窗體（https://flutter.io/widgets/）的一些例子。
14.React Native 中的樣式
React Native 中的樣式用 JavaScript 定義。所有 React Native 的核心組件都支持一個名為 style 的屬性。
樣式名稱和值和 Web 上的 CSS 很相似。
唯一的區別就是，在 React Native 中的樣式名稱是用大小寫混合的。所以要定義背景色，需要使用 backgroundColor，而不是 background-color。
15.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 (
Lorem Ipsum
);
}
}
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);
16.Flutter 的優點和缺點
我們來更仔細低看看它的優缺點。
使用 Flutter 的五個優點
- 寫代碼更快
Flutter 意味著更快、更動態的移動應用開發。代碼中的改變可以立即在應用程序中看到，這就是所謂的熱加載，只需花幾毫秒，能幫助開發者更快地添加功能、修復 Bug 和試驗各種新東西。
熱加載也十分適合開發者和設計師之間的合作，可以試驗各種應用程序的外觀並立即看到效果。
換句話說，Flutter 可以讓設計師和測試者一起與開發者在 UI 上工作。
絕大多數代碼變更都可以熱加載。但有一些變更需要重新啟動應用，這些是熱加載的限制。
相比之下，在原生應用程序開發時，整個項目需要重新構建，這需要花很長時間，有時甚至會花上幾分鐘。
- 一段代碼，兩個平臺
開發者只需寫一次代碼，就能在 Android 和 iOS 兩個平臺上運行。
Flutter 並不依賴於平臺，因為它有自己的窗體和設計，所以你可以在兩個平臺上擁有同樣的應用。當然，需要時你也可以做出不同的應用。
- 更少的測試
兩個平臺同樣的應用意味著需要的測試更少。QA 過程可以更快，因為只需要測試一份代碼。開發者只需要編寫一份測試代碼。
QA 專員的工作也會變少，因為他們只需要測試一個應用。如果不同平臺上的應用有差異，那麼這些差異需要在各自的平臺上測試。
- 招用戶喜歡的設計
Flutter 的設計方式使得開發者很容易創建自己的窗體，或定製已有的窗體。你可以瀏覽許多 Flutter 窗體的例子（https://flutter.io/widgets/）、Material Design 的例子（https://flutter.io/widgets/material/）和 Cuptertino 窗體的例子（https://flutter.io/widgets/cupertino/）。
- 舊設備上也有同樣的應用界面
即使在舊版本的 Android 和 iOS 平臺上，應用的外觀也是一樣的。適配舊設備不需要額外的工作。Flutter 能在 Android Jelly Bean 之後的版本和 iOS 8 之後的版本上運行。
缺點
- Flutter 依然是 Beta 狀態
在 2018 年 4 月，Flutter 發佈了 beta 2 版。Flutter 團隊還沒有發佈穩定版本。
“我們仍然在嘗試將 API 穩定下來，同時根據用戶的反饋對系統的各個部分進行改進。一些關鍵功能還無法用於大範圍的應用。”Flutter 官網如是說。
這就是說，以後還會有更多的改變和改進。
- 庫和支持
很不錯，但用於原生開發還略顯不足。
Flutter 很優秀，有許多函數庫提供了很多功能。
但是，Flutter 依然很年輕，因此不一定能在函數庫中找到所有需要的功能。也就是說，開發者需要自行創建這些功能，有可能會花很多時間。
- 持續集成的支持
因為 Flutter 依然是 Beta 狀態，它還沒有受到 Travis、Jenkins 等 CI 平臺的廣泛支持。
為了實現自動構建、自動測試和自動部署，開發團隊必須開發並維護自己的腳本。
17.React Native 的問題
React Native 也只需要一份代碼（JavaScript）。它的視圖組件在 iOS 和 Android 中的行為不一樣。
儘管 React Native 有大量的社區支持，為我們提供了許多優秀的插件和庫，但這也意味著這些庫可能會和已有項目衝突。
18.Flutter 的問題
如果你習慣了 JSX 環境，Fluttter 的 UI 代碼看上去有點無聊，而且在 UI 變得複雜之後代碼的可讀性也會變差。
與 React Native 相比，Flutter 的資源似乎並不多。主要原因就是 Flutter 的基礎還沒有 React Native 那麼穩定。但作為 Beta 版，Flutter 的資源已經有了巨大的成長。
19.結論
React Native 和 Flutter 都有自己的優缺點。React Native 有更多的社區支持，Flutter 依然很年輕，而 React Native 已經鋪好了路。
Flutter 看上去很吸引人，但還需要一些改進，還需要一些時間才能展示出潛力。
原文：https://medium.com/@surendervikram/flutter-vs-react-native-best-cross-platform-app-development-tool-16163e22618b
作者：Surender Vikram Singh，技術專家、企業家，有15年的全球開發經驗。
閱讀更多 CSDN 的文章
