前言
目前移動(dòng)端跨平臺(tái)最熱的兩門技術(shù) Flutter 和 React Native 都非常受歡迎。這兩門技術(shù)到底該入坑哪一門，我們來(lái)根據(jù)數(shù)據(jù)對(duì)比及分析來(lái)看該如何選擇 （只有菜鳥(niǎo)才做選擇題，大神會(huì)說(shuō)兩個(gè)我都要）。
Round 1：誰(shuí)在背書(shū)
兩門技術(shù)背后都有巨頭背書(shū)，一個(gè)是母公司更過(guò)名字的Google，一個(gè)是剛剛更名為 Meta 的 Facebook。兩個(gè)巨頭在互聯(lián)網(wǎng)界是“景行行止，高山仰止”的角色。
作為谷歌的親兒子，F(xiàn)lutter 誕生于2017年，一開(kāi)始是提供了移動(dòng)端的 SDK，通過(guò)聲明式的組件配置和絕殺技 —— 抹平平臺(tái)UI差異性渲染引擎 Skia，在跨平臺(tái)開(kāi)發(fā)界一下子搞得風(fēng)生水起。 而最近的2.0更是生猛，直接宣布進(jìn)軍 Web、桌面客戶端（Windows，Mac OS 和 Linux）和移動(dòng)端，不得不讓人感嘆一聲“后生可畏”。Flutter使用的 Dart 語(yǔ)言也是編譯型的面向?qū)ο蟾呒?jí)語(yǔ)言，因此執(zhí)行速度會(huì)更快。下面是 Flutter 的一些優(yōu)點(diǎn)：
- 免費(fèi)并且開(kāi)源，而且社區(qū)的開(kāi)源插件也已經(jīng)十分豐富。
- 基于響應(yīng)式編程的架構(gòu)設(shè)計(jì)使得代碼更好維護(hù)。
- 基于 Widget 的渲染框架設(shè)計(jì)，使得 Flutter 應(yīng)用能夠開(kāi)發(fā)出非常漂亮的 UI 界面和提供優(yōu)秀的用戶體驗(yàn)。
React Native 也是一個(gè)跨平臺(tái)的App 開(kāi)發(fā)平臺(tái)，在2015年的時(shí)候被 Facebook 引入。React Native 主要使用 JavaScript 語(yǔ)言進(jìn)行開(kāi)發(fā)，同樣是一套代碼可以編譯成不同平臺(tái)的應(yīng)用。下面是 React Native 的一些特性：
- 支持熱重載，可以加速開(kāi)發(fā)調(diào)試過(guò)程。
- 使用當(dāng)前非常流行的 JavaScript 語(yǔ)言開(kāi)發(fā)，使用 JavaScript 開(kāi)發(fā)者數(shù)量很多。
- React 組件是在原生基礎(chǔ)上進(jìn)行的二次封裝，可以通過(guò) React 的聲明式 UI 和 JavaScript 與原生進(jìn)行交互。這大大提高了開(kāi)發(fā)的效率。
從第一回合來(lái)看，F(xiàn)lutter 和 React Native 都是一等一的公司在背書(shū)，打成平手。
Round 2：市場(chǎng)份額
來(lái)自權(quán)威的 Statista 的統(tǒng)計(jì)表明，跨平臺(tái)開(kāi)發(fā)框架中，2021 年 Flutter 已經(jīng)和 React Native 持平。2020-2021年間，有42%的開(kāi)發(fā)者用過(guò) React Native 進(jìn)行開(kāi)發(fā)，這一年內(nèi)沒(méi)有增長(zhǎng)；而 Flutter 這一數(shù)據(jù)從2020年的39%上升到了42%。
另外，基于各大程序員交友網(wǎng)站的統(tǒng)計(jì)，感覺(jué) Flutter 在國(guó)外的流行度似乎更勝一籌，下面是數(shù)據(jù)。
本回合 Flutter 更勝一籌，比分暫時(shí)為2:1。
Round 3：編程語(yǔ)言 Dart 與 JavaScript
從受歡迎度上來(lái)說(shuō)，JavaScript 肯定更勝一籌，目前最新一期的 JavaScript 在 TIOBE 的排名第7名，距離上月增加了0.63%，而 Dart 目前還排在第31位，比例為0.42%，只能算是小眾語(yǔ)言。
雖然從語(yǔ)言性能上來(lái)說(shuō)，Dart 因?yàn)槭蔷幾g型語(yǔ)言，執(zhí)行速度上相比解釋型的 JS 更快，但是如果考慮招聘受歡迎度的話，企業(yè)肯定更愿意選擇有更多選擇（備胎）的 JS。
本回合 React Native 取勝，雙方再次回到同一起跑線，比分為2:2平！
Round 4：技術(shù)架構(gòu)
從技術(shù)上來(lái)說(shuō)，由于自帶渲染引擎，F(xiàn)lutter 的渲染框架擁有分層設(shè)計(jì)架構(gòu)。React Native則是基于其他軟件來(lái)構(gòu)建響應(yīng)式組件，并且使用 JS 橋接的方式與原生進(jìn)行交互。橋接一定程度上會(huì)影響性能，這一點(diǎn)上 Flutter 無(wú)需橋接能夠完成界面上的交互。
從這一點(diǎn)上來(lái)說(shuō)，F(xiàn)lutter 的技術(shù)架構(gòu)更具優(yōu)勢(shì)。這點(diǎn)從 GitHub 的源碼統(tǒng)計(jì)也可以看出來(lái)，React Native 的 JS 代碼為46.7%，而 Flutter 的倉(cāng)庫(kù) Dart 代碼占到了99.2%。本回合 Flutter 取勝，比分3:2。
Round 5：性能
從給出的運(yùn)行性能對(duì)比來(lái)看，F(xiàn)lutter 似乎更勝一籌。這還是得力于 Flutter 的編譯成平臺(tái)原生代碼的特性。而 React Native 的話還是通過(guò) JS 引擎來(lái)解釋執(zhí)行 JS 代碼，效率上肯定會(huì)打折扣。Flutter 再下一城，比分來(lái)到了4:2 —— 留給 React Native 的時(shí)間不多了！
Round 6：社區(qū)支撐
如果要構(gòu)建企業(yè)級(jí)的應(yīng)用，社區(qū)支撐是不得不考慮的因素。以 GitHub 為例，當(dāng)前 React Native 的貢獻(xiàn)者2257人， Star 數(shù)是99.3k，F(xiàn)ork 是21.4k。Flutter 的話貢獻(xiàn)者共937人，Star 是132k，F(xiàn)ork 是19.5k。這一回合JS 的開(kāi)發(fā)者數(shù)量?jī)?yōu)勢(shì)體現(xiàn)出來(lái)了，React Native追回一分，比分是4:3。
Round 7：UI 組件和個(gè)性化
由于 Flutter 自繪 UI 組件，而 React 是使用的原生組件，這使得 Flutter 繪制的組件平臺(tái)差異性幾乎沒(méi)有。這一點(diǎn)上如果要保持兩個(gè)平臺(tái)的 UI 無(wú)差異的話，React Native 顯然需要投入更多的工作去調(diào)整 UI 組件的樣式。當(dāng)然，React Native 目前也有很多第三方的組件庫(kù)來(lái)實(shí)現(xiàn)個(gè)性化的 UI 組件。本輪來(lái)看，F(xiàn)lutter 略勝一籌，比分再次拉開(kāi)到了5:3。
Round 8：代碼可維護(hù)性
不論是從升級(jí)過(guò)渡的平滑、一致性和調(diào)試來(lái)看，React Native 都難以和 Flutter 相比。這個(gè)很好理解，因?yàn)?Flutter 基本上使用 Dart 語(yǔ)言就可以搞定一切。而 React Native 則需要網(wǎng)頁(yè)開(kāi)發(fā)的三劍客（實(shí)際是 JS，JSX 和 CSS）。東西越多，肯定維護(hù)越復(fù)雜，比分6:3，F(xiàn)lutter 感覺(jué)已經(jīng)勝利在望了！
Round 9：開(kāi)發(fā)者成本
物以稀為貴，JS 開(kāi)發(fā)者眾多，成本上會(huì)比 Flutter 開(kāi)發(fā)者更低（國(guó)外也免不了內(nèi)卷），下面是國(guó)外統(tǒng)計(jì)的薪酬情況（我只看到了發(fā)達(dá)國(guó)家的高時(shí)薪）。
本輪從企業(yè)角度而言，還是 React Native 取勝，比分定格在6:4。
后記
本篇的對(duì)比僅僅是做參考，實(shí)際上從趨勢(shì)上看國(guó)外 Flutter 的流行度顯然比國(guó)內(nèi)好很多。國(guó)內(nèi)基本上不溫不火，從百度的搜索指數(shù)也能反映出來(lái)。
分布地區(qū)也是大城市居多。
整體熱度會(huì)比 React Native高，但如果綜合考慮 React 的話，那么Flutter 離 React 的熱度還差很多。
而且，國(guó)內(nèi)還有各類小程序，這是目前 Flutter 還搞不定的一塊。實(shí)際上，國(guó)內(nèi)不少企業(yè)選擇了 uni-app搞定 App，H5加小程序。因此，F(xiàn)lutter 在國(guó)內(nèi)要真正搞定全平臺(tái)還有點(diǎn)距離。當(dāng)然，如果從求職角度考慮，隨著 Flutter 的普及度提高，加上大廠應(yīng)用 Flutter 的范圍擴(kuò)大，相信很多會(huì)有不少企業(yè)從成本考慮更愿意雇傭 Flutter 開(kāi)發(fā)者。
Flutter 和 React Native，你選擇哪個(gè)？歡迎留言交流。
