React Native VS Flutter評測

ZacJi發表於2018-06-12
React NativeFlutter

React Native VS Flutter評測
之前分別用iOS原生和Flutter寫了一個空氣質量App並對它們對效能、容量等做了對比評測. 很多小夥伴在下方留言說這樣的對比沒有意義, 認為Flutter根本不是用來替代原生也不可能超越原生開發. 我這裡先做一個解釋:

我在對比評測中提供了儘可能多的資料, 並不是想證明Flutter和原生比有多爛, 而是想告訴你如果選擇了Flutter你的App包會增長多少倍、對App啟動速度的影響會有多少秒, 好讓大家將來在定技術棧的時候能夠儘量心中有數.

當然也有網友提出和應該React Native來做對比, 畢竟這兩個都是主攻跨平臺開發. 其實我早就想做一個類似的對比評測, 前段時間公司出現變動, 週末難得抽空做了一個React Native版的Demo, 最終得出了今天這份評測報告.

Aireport(iOS原生)

Aireport Flutter(Flutter版)

RN版還在稽核中, 大家可以自行下載體驗一下.

1.安裝包大小

Flutter應用安裝包和安裝後容量

React Native VS Flutter評測
React Native應用安裝包和安裝後容量
React Native VS Flutter評測
這個差距, emmmmmm, 這裡給出iOS原生版應用的大小大約在2.47MB, 也就是說RN已經做到了比原生還要小的安裝包. 這主要歸功於兩點:

  • 基於iOS自帶的UI框架而非Flutter這樣的自有框架(Flutter SDK有30MB左右)
  • RN最終轉換的程式碼為OC而對比的原生應用使用了Swift編寫(本次預測大失敗, Swift5並沒有隨著WWDC放出, 也就沒能整合到iOS12中....)

React Native VS Flutter評測

React Native較小的安裝包帶來的優勢不僅是降低了下載門檻、減少了磁碟佔用, 而且對於混合開發的壓力也更小. 試想一個原生App因為幾個頁面使用了Flutter, 一行程式碼沒寫安裝包就憑空增加了30MB, 這樣的結果不是開發人員希望看到的.

2.啟動速度

React Native VS Flutter評測
啟動速度RN依然與原生不相上下, 並且要比Flutter好上一個等級. RN雖然使用js來構建應用程式, 但最終RN會使用js來呼叫成原生程式碼生成原生UI控制元件. 至於Flutter, 正如我之前的評測中說的, 其App啟動的過程包含一個原生App啟動過程直至第一個原生VC初始化過程+Flutter執行時環境的初始化過程, 這個過程無疑拖累了Flutter的最終結果.

3.記憶體佔用

React Native VS Flutter評測
記憶體佔用方面, RN顯然沒有原生做的好, 與Flutter的差距也不大, 而且經測試發現, RN的記憶體佔用不是很穩定, 頁面剛生成的時候記憶體佔用會高一點, 之後緩慢回落.

React Native VS Flutter評測
通過Xcode工具我們可以看到, RN(React Navigation)並沒有使用iOS系統的導航系統, 而是以一種相對粗暴的形式直接覆蓋在了上一個View上. 相反iOS原生系統的頁面切換會在新頁面顯示完畢後將前一個頁面去掉(不做渲染), 這樣可以有效節省記憶體的消耗. 此外, RN的控制元件也沒有使用UIKit中的現有元件, 而是通過最基本的UIView去組合模仿(比如NavigationBar). 這樣做雖然可以減少安卓和iOS之間UI層的差異, 但顯然優化的空間就變小了.

4.流暢度

React Native幀率

React Native VS Flutter評測
Flutter幀率
React Native VS Flutter評測
iOS原生幀率
React Native VS Flutter評測
我們可以看到, RN得益於UIKit的加持, 整體流暢度和原生非常接近, 比聲稱60幀的Flutter要好. 尤其是搜尋頁滾動的幀率. 但是在頁面切換(紅色區域)時漏出了馬腳, 原因就在於上面提到的, RN並沒有使用系統自帶的導航系統, 而是自己做了一個類似的平移動畫. 很可惜, 這個動畫並沒有跑滿60幀, 但也要比Flutter好一點.

觀察動畫的時間和曲線可以發現, 原生的跳轉動畫時間更長, 但他的加速效果也是最好的, 其他兩個平臺的跳轉動畫就略顯生硬.

最後可以分別觀察一下CPU的佔用, RN的表現可以說是非常好了, 尤其是在TableView滾動的時候, 其原因也很簡單, 它沒有使用reuse pool, 因此不需要頻繁修改已存在的Cell, 壞處是隨著Cell的增多, 記憶體壓力也會越來越大.

5.iOS特性支援

由於最後還是用原生語言去實現, RN先天可以得到iOS的部分特性. 而且相比於Flutter, 線上熱更新才是它真正的殺手鐗. Flutter雖然理論上可以實現, 但部署起來還有很多的問題需要解決, 一切還是未知數. 此外, RN和Flutter都支援混編, 這就幾乎解決了實現上的所有問題. 唯一的問題是, 有多少功能和特性需要用原生去實現, 這樣的維護成本又有多高.

最後的最後還是要說一下, Flutter目前還在測試版, 不建議在生產環境使用, 因此以上做出的對比並不能代表Flutter最終的真實水平. 但可以預見, 在短期內Flutter還是無法撬動RN在跨平臺開發中的地位, RN仍舊是目前跨平臺開發的最優解. 但不可否認Flutter確實實現了Write Once,Run Anywhere, 只不過至少在Fuchsia出來之前, 我們都無法完整評估它的真實價值.

最後給出GitHub地址:

Aireport(iOS原生)

Aireport Flutter(Flutter版)

Aireport Flutter(React Native版)

相關文章