1. 程式人生 > >【轉】Flutter與RN比較

【轉】Flutter與RN比較

RN都還沒捂熱,Flutter又來了
Flutter其實這也是一個跨平臺的框架,在 GDD 會議之前我其實並不瞭解這個。這是 Google 在近年來開發出來的一個框架,也是用來達到跨平臺的效果。不過現在還處於 Alpha 階段。

以下觀點出自知乎
作者:馬超
連結:https://www.zhihu.com/question/50156415/answer/278374951
來源:知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
與其評價 Flutter ,不如拿 Flutter 和 Facebook 的 ReactNative 做個對比。前兩天的 GDD 我也和 Flutter 的開發專家來了一次面對面的交談,以下是總結。

1、跨平臺 + ReactNative + Flutter
這裡寫圖片描述
ReactNative 大家應該不陌生。不過我還是簡單的介紹下, ReactNative 的簡稱是 RN ,是前幾年 Facebook 開源的一個跨平臺的框架。什麼是跨平臺?如果你是移動開發者的話,應該知道 Android 是使用 Java 語言來開發而 iOS 則是 OC 來開發,當然我說的是通常情況下使用這兩種語言來開發的。所以各大科技圈大佬們都在絞盡腦汁的想統一這兩個平臺,無論 Android 還是 iOS 都是移動端,若能統一用一套語言開發應用那最好不過的。這也正是跨平臺的意思,簡單的說就是你寫的同一套程式碼可以執行在不同的平臺。而 ReactNative 正是跨平臺的產品,在 JavaScript 和 React 的基礎上你可以獲得完全一致的開發體驗。你若是 Android 開發者也可以很輕鬆的開發出來 iOS 的產品。

那麼 Flutter 是什麼?其實這也是一個跨平臺的框架,在 GDD 會議之前我其實並不瞭解這個。這是 Google 在近年來開發出來的一個框架,也是用來達到跨平臺的效果。不過現在還處於 Alpha 階段。
2、Flutter 和 ReactNative 的區別一個是 Facebook 推出兩年多的 RN ,另一個則是 Google 這種頂級科技公司的產品。那麼它們有什麼區別呢?玩過 ReactNative 的朋友應該或多或少看過它的原始碼,從實現原理上來講 ReactNative 提供的元件都是繼承自原生 Native 的 View 元件,比如ReactNative 中的 ListView 在 Android 中就是繼承自 ListView ,還有 RecycleView。然而 Flutter 則不同,它的所有 UI 元件都是一幀一幀畫出來的。這樣也能夠很準確,也很靈活的做出你想要的 UI 。其次它還非常人性化的貼近了平臺的特性,比如 Android 的 Material Design 在 Flutter 就預設支援了進去。其實話說回來,在開發者角度來講這兩個跨平臺都是一樣的使用效果,畢竟都是通過一套語言來搭建可執行不同平臺的應用。然而,Flutter 使用 Dart 語言開發而 ReactNative 則使用 JS 結合 XML 來開發的。這就有問題了。
3、Dart 語言開發的 Flutter 框架相信並沒有幾個讀者知道還有 Dart 這種語言,說實話在這次大會之前我也不知道。不過還好在那場會議上面,他們的工程師親自演示了用 Dart 語言的 Flutter 來搭建了一個應用。也著實讓我大跌眼鏡。為什麼這麼說呢?因為用 Dart 語言來寫介面真的是看著很不友好。我來貼一段程式碼,這是用 Dart 寫的一個簡單的 UI 元件。

作為初次瞭解到 Dart 得我一眼看去,真的不知道這寫了個什麼。因為括號太多了,各種巢狀。而且是直接將子 View 整段嵌進去,如果這個 View 更加複雜的話,你就會看到更多的巢狀。而相比 ReactNative 中 JS 和 XML 的寫法,無論從邏輯上可通讀性都是有一定差距的: 其實話說白了,這也正是 Dart 和 JS 的區別。今天我也抽空搜了下 Dart 這個語言,說 Dart 是非常有能力替代 JS 的程式碼,而且 Dart 的開發者也是這麼認為的。他們的目標就是 JS 的開發者會選擇用 Dart 來開發。但。。。
4、為什麼Flutter 用 Dart 開發在會後,我也主動的去找 Flutter 的開發專家 Divod 聊了會。我問到他一個問題,我說為什麼你們會選擇用 Dart 語言來開發而不選擇用XML 和 JS ,從剛才您的程式碼示例上我的第一感覺就是沒有 ReactNative 的可讀性高。大家也許覺得我太大膽,在 Google 的場子提 Facebook 的東西。但技術畢竟是技術,程式設計師何苦為難程式設計師,這是一場技術的交流。最後,他也給了我一個滿意和無力反駁的答案,“因為 Dart 的開發團隊就在他們旁邊,他們能給到我們很快的支援。我們能很快溝通到”。所以我也就默認了 Flutter 註定會一直使用 Dart 這門語言。5、親測 Flutter 框架當然今天我也抽空玩了一把 Flutter 。我把之前在 ReactNative 遇到問題的情況也同樣在 Flutter 上實現了一下。“用 ListView 載入上千張大圖”。在 ReactNative 和 Flutter 的表現上來看記憶體和 CPU 的使用量並沒太大區別,但在頁面渲染上 ReactNative 並沒有 Flutter 流暢。而且圖片量越大, ReactNative 的渲染速度會更慢,甚至是會爆掉。 Flutter所以,無論是 Flutter 還是 ReactNative,更或者 Weex 其實都是業界很不錯的跨平臺框架。只不過從版本歷史還是開發人數上來講,我更傾向於 ReactNative。因為我是一個 Facebook 粉。