Flutter 比 React Native 更優秀的五個理由

Z招錦發表於2021-08-07
FlutterReact Native

Flutter 比 React Native 更優秀的五個理由

11.jpg

現在，程式設計師們有兩個有競爭力的跨平臺應用開發選擇。Flutter 和 React Native。我們可以使用這兩個框架來構建跨平臺的移動應用和桌面應用。這兩個框架從外觀和可用的功能上看確實相似。希望你已經看過關於 Flutter 和 React Native 的比較和評論。很多開發者認為 Flutter 不會被廣泛使用，因為它使用了一種陌生的程式語言 Dart，但程式語言只是開發人員與框架互動的一個介面。

對於一個特定的框架如何解決跨平臺開發的問題，位元定框架的程式語言的流行更重要。我對 Flutter 和 React Native 的內部架構做了一些簡要探索。此外，我還使用這兩個框架在不同平臺上建立了幾個應用程式。最後，我發現如果你用 Flutter 開發你的下一個應用軟體，會有以下五點好處。

Flutter 具有近乎原生的效能

如今，由於裝置的先進完善，應用的執行效能不被重視。但是使用者的裝置有各種不同的規格。部分使用者可能試圖在執行你的應用程式的同時，也執行很多其他應用程式。你的應用程式應該在所有這些條件下也能正常工作。因此，效能仍然是現代跨平臺應用程式的一個關鍵因素。可以肯定的是沒有任何框架編寫的應用程式比 Flutter 和 React Native 應用程式的效能更好。但我們經常要選擇一個跨平臺的應用框架來快速交付功能。

一個典型的 React Native 應用有兩個獨立的模組：原生 UI 和 JavaScript 引擎。React Native 根據 React 狀態的變化渲染本地平臺特定的 UI 元素。另一方面，它使用一個 JavaScript 引擎（在大多數情況下是 Hermes）來執行應用程式的 JavaScript。每一個 JavaScript 到原生和原生到 JavaScript 的呼叫都要經過一個 JavaScript 連線，類似於 Apache Cordova 的設計。React Native 在最後默默地將你的應用程式與一個 JavaScript 引擎捆綁在一起。

Flutter 應用程式沒有任何 JavaScript 執行時，Flutter 使用二進位制資訊傳遞通道在 Dart 和原生程式碼之間建立雙向通訊流。由於這種二進位制資訊傳遞協議和 Dart 的超前（AOT）編譯過程，Flutter 為從 Dart 呼叫原生程式碼提供了接近原生的效能。當有高於平均水平的本地呼叫時，React Native 應用程式可能表現不佳。

Flutter 應用程式有一個統一的 UI

React Native 會渲染特定平臺的 UI 元素。例如，如果你在蘋果的移動裝置上執行你的應用程式，你的應用程式會渲染原生的 iOS UI 元素。每個平臺都為其 UI 元素定義了獨特的設計概念。有些平臺的 UI 元素是其他平臺所沒有的。因此，如果你使用 React Native，即使是一個簡單的 UI 變化也需要在多個平臺上進行測試。同時，你也無法克服平臺特有的 UI 元素的限制。

Flutter SDK 定義了自己的 UI 工具包。因此，Flutter 應用程式在每個作業系統上看起來都一樣。與 React Native 的特定平臺 UI 元素不同，Flutter 團隊可以為每個 UI 元素引入新功能。由於 Flutter-theming 的存在，你可以根據使用者在特定作業系統上的設定來改變應用程式的主題。

幾乎所有的現代應用程式都從應用程式的設計概念中顯示出它們的品牌。Flutter 激勵人們在所有支援的作業系統上建立一致的使用者體驗，並採用一致的 GUI 層。

Flutter 提供了一個富有成效的佈局體系

React Native 有一個用 Yoga 佈局引擎建立的基於 FlexBox 概念的佈局系統。所有的 Web 開發者和 UI 設計師都熟悉 CSS FlexBox 的造型。React Native 的佈局語法與 CSS FlexBox 的佈局風格。許多開發人員經常為高階 CSS 樣式而苦惱，他們經常讓團隊的 UI 開發人員來解決 CSS。因此，如果你使用 React Native 製作你的下一個應用程式，你需要僱用一個 UI 開發人員或要求移動開發人員熟悉 CSS FlexBox 語法。

Flutter 有一個基於 widget 樹的佈局系統。換句話說，Flutter 的開發者通常通過覆蓋 build 方法，在一個類似渲染樹的資料結構中定義部件。可以想象每個小部件將如何在螢幕上呈現。如果你選擇 Flutter，不需要額外的 UI 開發人員，也不要求現有的開發人員擁有 FlexBox 開發經驗。即使是後端工程師也能很快熟悉這種 widget-tree 的概念，而不是 FlexBox 的概念。

多虧了 Flutter 的樹狀佈局系統，我們可以提高跨平臺應用程式的功能開發速度。當應用程式的佈局變得複雜時，程式設計師可以通過將小部件分配給不同的 Dart 變數，將它們分組到不同的部分。

Flutter 正式支援所有熱門平臺

React Native 官方只支援 Android 和 iOS 平臺。然而，有幾個 React Native 的分支支援桌面平臺。例如，Proton Native 可以從 React Native 程式碼庫中生成基於 Qt 和 wxWidgets 的跨平臺桌面應用程式。現在開發人員並沒有積極維護 Proton Native，但還有一個活躍的分支：Valence Native。

同時，微軟維護著兩個 React Native 分支：react-native-windows 和 react-native-macos。如果你想為現有的 React Native 應用建立一個桌面應用，倒是有幾個選擇。每個流行的 React Native 庫都不支援所有這些分支。另外，目前還沒有功能完善的 React Native 支援 Linux。

Flutter 官方支援 Android、iOS、Linux、Windows、macOS、Fuchsia 和 Web。所有支援的作業系統都使用相同的渲染後端，即 Skia。Flutter 通過提供高效能的 Dart-to-Native 二進位制通訊機制和完善的文件，激勵所有外掛開發者為所有平臺新增實現。因此，幾乎所有流行的 Flutter 外掛都能在所有支援的平臺上執行。

Flutter 應用程式將在 Fuchsia 上執行自如

也許你已經知道，谷歌正在從頭開始開發一個新的作業系統，即 Fuchsia。基於微核心架構的 Zircon 核心為 Fuchsia 提供動力。根據維基百科，谷歌的想法是使 Fuchsia 成為一個通用的作業系統，支援幾乎所有的裝置（包括嵌入式裝置，例如數字手錶和交通燈系統）。谷歌正在從所有現有平臺的許多經驗中構建 Fuchsia。因此，Fuchsia 在作業系統市場上獲得成功的概率較大。

Fuchsia 正在實現 Starnix 模組，以便在 Fuchsia 內部執行 Linux 二進位制檔案。根據其設計文件，Starnix 模組仍然是一個非常實驗性的模組。顯然，他們正試圖通過在一個類似 Docker 的容器中執行 Linux 核心來執行 Linux 二進位制檔案。因此，你的 React Native 應用不會在 Fuchsia 上作為一個真正的本地應用工作。如果有人希望為 React Native 新增一個 Fuchsia 後端，需要有人再做一個像 react-native-windows 的分支。

Flutter SDK 可能成為 Fuchsia 上預設的 GUI 應用開發工具包。因此，你的 Flutter 應用程式將在 Fuchsia 上原生工作。

本文總結

React Native 專案比 Flutter 專案早兩年，整個 React 社群都支援它。Flutter 的社群仍然處於新興成長階段，因為 Flutter 沒有使用 Angular，而且 Dart 在早期並不是一種像 JavaScript 那樣流行的通用程式語言。我們仍然無法將 Flutter 的功能與其他成熟的跨平臺框架進行比較。但 Flutter 通過最有效的方法解決了跨平臺的問題。

這兩個框架都是在本地主機應用之上執行的。React Native 不能像 Flutter 那樣提高效能，因為它是基於 JavaScript 執行時的架構。嘗試用 Flutter 構建應用程式，不要由於 Dart 是一種陌生的語言而感到害怕。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章