Jamon Holmgren 是一家軟件開(kāi)發(fā)公司的創(chuàng)始人兼 CTO，擁有超過(guò) 25 年的編程經(jīng)驗(yàn)，同時(shí)也是 React Native 的核心成員，維護(hù)著幾個(gè)開(kāi)源庫(kù)。在這篇文章里，他試著盡可能公平地從多方面去討論 Flutter 和 React Native 的優(yōu)劣勢(shì)。本文僅代表他個(gè)人觀點(diǎn)，希望能為讀者帶來(lái)收獲。

作為目前人氣最高的多平臺(tái)移動(dòng)應(yīng)用框架，F(xiàn)lutter 與 React Native 可謂難分伯仲。關(guān)于二者誰(shuí)更勝一籌的爭(zhēng)議也從未止歇……開(kāi)發(fā)者紛紛站隊(duì)，應(yīng)用交付也只選其一。那么，到底誰(shuí)更強(qiáng)？

取巧的回答是，“具體要分情況。二者各有利弊，選誰(shuí)不選誰(shuí)、要看具體取舍?！?/p>

但這樣的回答說(shuō)了等于沒(méi)說(shuō)。廢話文學(xué)解決不了問(wèn)題，正面對(duì)線才是群眾們喜聞樂(lè)見(jiàn)的場(chǎng)面。所以，咱們就整點(diǎn)直接的、刺激的，聊聊 Flutter 和 React Native 誰(shuí)更強(qiáng)。

這話題，重要嗎？

其實(shí)不重要，但不重要不代表沒(méi)意思：性能、開(kāi)發(fā)者體驗(yàn)、Dart 與 JavaScript、本機(jī)集成、標(biāo)準(zhǔn)庫(kù)等等都是很有意思的話題，都值得拿來(lái)一聊。

有些朋友可能覺(jué)得這篇文章有點(diǎn)標(biāo)題黨，別著急，我會(huì)在后文中以更細(xì)微的方式深入探討論斷背后的種種細(xì)節(jié)。

現(xiàn)在咱們直入正題：這話題，重要嗎？

說(shuō)重要也重要，對(duì)于一家打算開(kāi)發(fā)新應(yīng)用的企業(yè)來(lái)說(shuō)，以下幾個(gè)問(wèn)題就是無(wú)法回避的現(xiàn)實(shí)考量：

招聘

現(xiàn)在，招聘開(kāi)發(fā)者可謂困難重重。技術(shù)崗位的工資不斷上漲，市場(chǎng)供應(yīng)卻相當(dāng)有限。想來(lái)的人看不上、看上的人不想來(lái)，難得很。

Flutter 開(kāi)發(fā)者的群體特征，可以用熱情和優(yōu)秀來(lái)概括，也體現(xiàn)出整個(gè)技術(shù)社區(qū)的整體傾向。但問(wèn)題是，這類開(kāi)發(fā)者數(shù)量不大，沒(méi)法像 Dart 那樣隨招隨有。所以，我們只能在企業(yè)內(nèi)部不斷培訓(xùn)，引導(dǎo)大家掌握 Flutter。

另一方面，React Native 開(kāi)發(fā)者的規(guī)模就相當(dāng)可觀了，背靠的是聲名極盛的 JavaScript 社區(qū)。JavaScript（及其變體 TypeScript）堪稱當(dāng)前世界上最為流行的編程語(yǔ)言，而且參與者數(shù)量仍在快速增長(zhǎng)。支持 React Native 的 React.js 也可以說(shuō)是世界上最大的編碼框架之一，甚至沒(méi)有之一。所以，招聘工作雖然也是困難重重，但可供選擇的開(kāi)發(fā)者數(shù)量肯定比 Flutter 大得多。另外，React 開(kāi)發(fā)者也能比較輕松地轉(zhuǎn)型成高效靠譜的 React Native 開(kāi)發(fā)者。

共享代碼、知識(shí)與開(kāi)發(fā)者

除了招聘之外，決定 Flutter 和 React Native 誰(shuí)更強(qiáng)的另一個(gè)重要因素，就是共享代碼、知識(shí)與開(kāi)發(fā)者的規(guī)模。

在軟件開(kāi)發(fā)領(lǐng)域，有什么是比代碼好更重要的？那就是代碼少。而削減代碼工作量的最佳方式之一，就是在各種應(yīng)用程序之間共享現(xiàn)有代碼成果。這不僅能縮短初始開(kāi)發(fā)周期，也有利于簡(jiǎn)化長(zhǎng)期維護(hù)流程。

沒(méi)準(zhǔn)你的公司正在網(wǎng)站、Web 應(yīng)用程序或者服務(wù)器當(dāng)中使用 React.js，或者至少在用 JavaScript。這種在 React.js 應(yīng)用程序、Node 服務(wù)器等場(chǎng)景之間共享代碼的能力，正是 React Native 最引以為傲的資本——相比之下，F(xiàn)lutter 就明顯弱一些。

除了共享代碼，React Native 還能在 Web、后端、iOS 及 Android 團(tuán)隊(duì)之間實(shí)現(xiàn)知識(shí)共享。網(wǎng)上關(guān)于 React Native、React 和 JavaScript 的教程也是所在多有，這還沒(méi)算上技術(shù)博文、StackOverflow 問(wèn)答等補(bǔ)充性內(nèi)容。

另外，開(kāi)發(fā)者也能在各個(gè)項(xiàng)目之間“反復(fù)橫跳”，不用經(jīng)過(guò)多少二次培訓(xùn)就能快速投身于時(shí)間緊、任務(wù)重的關(guān)鍵項(xiàng)目。

所以在 React Native 和 Flutter 二選一的交鋒中，我們很難忽略上面這些基本事實(shí)。

那，其他因素呢？

是的，性能、開(kāi)發(fā)者體驗(yàn)、可訪問(wèn)性、第三方庫(kù)生態(tài)也都很重要。

而在這些方面，F(xiàn)lutter 與 React Native 基本是拼了個(gè)五五開(kāi)。Flutter 在某些方面勝出，React Native 也擁有自己的特定優(yōu)勢(shì)。所以除了能跟 Web 共享代碼這一條外，二者在其他特定方面都屬于勢(shì)均力敵的狀態(tài)。

開(kāi)發(fā)者體驗(yàn)

Flutter 團(tuán)隊(duì)（乃至整個(gè) Google）真的很擅長(zhǎng)設(shè)計(jì)開(kāi)發(fā)者體驗(yàn)。

Flutter 的開(kāi)發(fā)環(huán)境設(shè)置難度一般低于 React Native。Flutter 的熱重載效果也比 React Native 的快速刷新好一些。它提供非常出色的部件調(diào)試、分析與檢查工具，內(nèi)置的端到端測(cè)試功能也比 React Native 的 Detox 好很多。Flutter 的 CLI 堪稱行業(yè)頂尖——我就特別喜歡其中的 flutter doctor 命令，允許開(kāi)發(fā)者直接通過(guò) CLI 管理自己的模擬器與仿真器。

Flutter 的升級(jí)體驗(yàn)也更好，我們直接在現(xiàn)有應(yīng)用程序中運(yùn)行 flutter create，它就能根據(jù)新版本重建所有內(nèi)容。

與之相比，React Native 的很多工具不像 Flutter 那樣優(yōu)雅完善。其中最讓人難受的就是升級(jí)體驗(yàn)，最近幾年用過(guò) React Native 的朋友們應(yīng)該對(duì)此深有同感。

當(dāng)然，情況也在逐漸改善。微軟的幾位大佬就在之前的訪談中討論過(guò) React Native 工具與開(kāi)發(fā)者體驗(yàn)的改進(jìn)思路。

此外，Expo 也確實(shí)極大改善了 React Native 中的開(kāi)發(fā)者體驗(yàn)。使用 Expo 服務(wù)，大家不僅能夠?qū)崿F(xiàn)原版 React Native 中的一切功能，還將獲得更好的升級(jí)體驗(yàn)與集成工具運(yùn)行效果。如果不打算使用自定義本機(jī)代碼，Expo Go 則是一種無(wú)需編譯即可與他人快速共享 build 的絕佳方式。總之，如果你正在使用 React Native，千萬(wàn)別跟 Expo 失之交臂！

小總結(jié)：Flutter 的開(kāi)發(fā)者體驗(yàn)具有明顯優(yōu)勢(shì)；React Native 雖然正在迎頭趕上，但還有很長(zhǎng)的路要走——不過(guò) Expo 的出現(xiàn)帶來(lái)了一股強(qiáng)勁助力。

性能

軟件框架的性能差異其實(shí)很難比較，更不用說(shuō)像 Flutter 和 React Native 這樣高度復(fù)雜的框架方案了。在大多數(shù)情況下，F(xiàn)lutter 和 React Native 的速度都“夠快”，如果開(kāi)發(fā)者有能力做一點(diǎn)性能優(yōu)化，那運(yùn)行效果更是毫無(wú)問(wèn)題。

不過(guò)從歷史上看，F(xiàn)lutter 的開(kāi)箱即用性能一直要優(yōu)于 React Native。當(dāng)然，防杠聲明：我們都見(jiàn)過(guò)性能極差的 Flutter 應(yīng)用程序和性能極佳的 React Native 應(yīng)用程序，這里說(shuō)的只是整體趨勢(shì)。

二者的性能差異，主要源自異步 React Native 橋接器。但隨著今年春季新架構(gòu)的推出，它將被原生與 JS 代碼間的并發(fā)通信所取代。此外，Hermes JS 引擎也讓許多關(guān)鍵性能指標(biāo)更上一層樓。最后，Skia 現(xiàn)已加入 React Native 全家桶，意味著大家可以在 React Native 用到跟 Flutter 相同的渲染器了——當(dāng)然，僅限于需要流暢性能的位置。

小總結(jié)：Flutter 在性能方面暫時(shí)小幅領(lǐng)先，但 React Native 新架構(gòu)的推出有望快速縮小這方面差距。

統(tǒng)一的 UI 體驗(yàn)

Flutter 使用 Skia 進(jìn)行 UI 渲染，而且在所有平臺(tái)上都提供統(tǒng)一的外觀。這樣開(kāi)發(fā)者就能優(yōu)化性能、自定義 UI，有效擺脫平臺(tái)天然特性的影響。

另一方面，React Native 在 iOS 上使用 UIKit，在 Android 上使用 Android 布局系統(tǒng)，在 Web 上用的則是 DOM。這意味著雖然我們?cè)跇?gòu)建應(yīng)用程序外觀時(shí)可以盡量強(qiáng)調(diào)相似，但實(shí)際跑在不同平臺(tái)上時(shí)往往受到具體解釋方法的影響。

人們對(duì) Flutter 一直有怨言，批評(píng)它總在重新發(fā)明已經(jīng)由平臺(tái)自身解決了的各種問(wèn)題，包括輔助功能、字體縮放等等。公平地講，F(xiàn)lutter 的方案效果不錯(cuò)（使用較低層級(jí)的內(nèi)置平臺(tái) hook），但畢竟是費(fèi)了二遍勁；相比之下，React Native 就總能或多或少依賴于平臺(tái)提供的原語(yǔ)。

另外值得一提的是，Google 開(kāi)發(fā)者曾經(jīng)表示不再將統(tǒng)一體驗(yàn)作為核心目標(biāo)。這似乎跟 Flutter 的路線不太匹配。

小總結(jié)：如果大家覺(jué)得在不同平臺(tái)上更好地匹配用戶體驗(yàn)、要比提供跨平臺(tái)統(tǒng)一體驗(yàn)更重要，那么 React Native 還是略微勝出。

原生集成

Flutter 會(huì)把 Dart 代碼編譯成原生代碼，再使用自身所謂平臺(tái)通道（Platform Channels）將原生代碼納入酷炫的集成模型。它允許同步本機(jī)調(diào)用，也允許開(kāi)發(fā)者使用 Swift 和 Kotlin 編寫代碼。Flutter 的說(shuō)明文檔質(zhì)量也很高，并提供開(kāi)箱即用的測(cè)試與模擬等多種工具。無(wú)論你選擇哪種平臺(tái)，這里都提供大量模板，并通過(guò) Isolates 實(shí)現(xiàn)了一流的線程支持功能。

而在 React Native 這邊，原生集成就有一定的入門門檻了。另外，我們還得跟 React Native 橋接局限作斗爭(zhēng)，原生集成的說(shuō)明文檔也不盡人意。

值得注意的是，新一代 React Native 架構(gòu)直接去年了橋接器，全面引入了原生同步集成優(yōu)勢(shì)。所以升級(jí)之后，React Native 的缺點(diǎn)已經(jīng)不多了。

小總結(jié)：兩大平臺(tái)都具備完整的原生集成能力，但 Flutter 的原生集成工具更好些。

國(guó)際化水平

國(guó)際化/本地化（i18n）當(dāng)然重要。Flutter 就內(nèi)置有 i18n 支持，所以不依賴于其他第三方。而 React Native 雖然缺少內(nèi)置支持，但其中的第三方 i18n 支持確實(shí)越來(lái)越好。

小總結(jié)：沒(méi)有輸贏——兩大平臺(tái)在國(guó)際化方面都表現(xiàn)不錯(cuò)，但也各自存在一些局限。

內(nèi)置導(dǎo)航（及更多）

Flutter 在設(shè)計(jì)上比 React Native 更貼心，最典型的體現(xiàn)就是它帶有自己的導(dǎo)航/路由解決方案。

導(dǎo)航屬于特別適合集成到核心框架中的模塊，因?yàn)樗鼘?duì)大多數(shù)應(yīng)用程序來(lái)說(shuō)非常重要。大家可以想象一下不帶路由程序的 Next.js……那就基本廢了。

React Native 走的則是更為靈活的路線，允許開(kāi)發(fā)者隨意引入自己熟悉的導(dǎo)航解決方案。選項(xiàng)很多，但支持效果最好的是 React Navigation 和 React Native Navigation 庫(kù)（有點(diǎn)遺憾）。

Flutter 還提供內(nèi)置的主題支持等功能。另一方面，作為 React Native 上的樣板選項(xiàng)，Ignite 也有自己的主題支持功能，唯一的區(qū)別就是這些主題并非 React Native 的內(nèi)置主題。

Flutter 這種內(nèi)置路線的好處，開(kāi)發(fā)者可以隨意調(diào)整相應(yīng)功能以匹配各個(gè)版本的框架特性。但內(nèi)置路線也有缺點(diǎn)，就是一旦出現(xiàn)更好的范式，開(kāi)發(fā)者只能祈禱官方支持團(tuán)隊(duì)能盡快更換那些更新、更好的解決方案。

小總結(jié)：Flutter 有一定優(yōu)勢(shì)。帶內(nèi)置導(dǎo)航模塊肯定不是壞事，不過(guò) React Native 社區(qū)也提供不少出色選項(xiàng)。

Web 支持

Flutter 2 宣布將支持 Web 及其他平臺(tái)。

但他們選擇的 Web 方法只能說(shuō)是“允許開(kāi)發(fā)者在畫(huà)布上繪制”，而非使用原生 DOM。

這肯定會(huì)帶來(lái)輔助功能和 SEO 方面的問(wèn)題。還不止如此……總之，委婉一點(diǎn)講，用 Flutter 開(kāi)發(fā) Web 應(yīng)用程序應(yīng)該不是首選方案。

值得一提的是，F(xiàn)lutter 確實(shí)也提供 HTML/CSS/DOM 版本，只是用得沒(méi)畫(huà)布渲染器多。但即使如此，在這方面它也根本無(wú)法與 React.js 相抗衡。

另一方面，無(wú)論大家是用 React Native 開(kāi)發(fā) Web 應(yīng)用程序、還是直接選擇 React.js，React Native 都能直接共享代碼。通過(guò) JavaScript/Typescript 共享服務(wù)與模塊，開(kāi)發(fā)者能夠輕松共享大量業(yè)務(wù)邏輯、數(shù)據(jù)模型等，并在 Web 應(yīng)用程序中拆分并直接共享 UI 組件?？傊琑eact.js 是專為 Web 而生，一切設(shè)計(jì)都以 Web 開(kāi)發(fā)為目標(biāo)，這一點(diǎn)跟 Flutter for Web 有所不同。

小總結(jié)：React Native 占據(jù)明顯優(yōu)勢(shì)。雖然 Flutter 2 也在朝著這個(gè)方向邁進(jìn)，但 React Native 在 Web 領(lǐng)域已經(jīng)擁有巨大的先發(fā)優(yōu)勢(shì)。想要縮小差距，很難的啦。

第三方庫(kù)

在典型的 React Native 應(yīng)用當(dāng)中，我們會(huì)用到大量最初專為 JavaScript 或 React 設(shè)計(jì)的庫(kù)和工具，包括 axios, mobx, redux, lodash, ramda, eslint, babel, jest, prettier, react-devtools, typescript, npm 以及 yarn 等等。

這些都是 Web 和 Node 開(kāi)發(fā)者常用的庫(kù)。所以在社區(qū)合并之后，這些工具將獲得兩方面的貢獻(xiàn)和改進(jìn)，知識(shí)共享與互幫互助的氛圍也更好。

另一方面，F(xiàn)lutter 則主要使用量身定制的庫(kù)。雖然市面上也有部分第三方 Dart 庫(kù)可用，但社區(qū)規(guī)模遠(yuǎn)遠(yuǎn)不及 JavaScript。

話雖如此，但 Dart 其實(shí)帶有統(tǒng)一的格式化程序、測(cè)試、編譯器、分析器/linter 與包管理器，同時(shí)也是一種類型安全與空值安全的語(yǔ)言。所以在使用 Flutter 加 Dart 時(shí)，開(kāi)發(fā)者可能很少需要再借助什么第三方庫(kù)。

小總結(jié)：Flutter 與 Dart 都提供不少高質(zhì)量的內(nèi)置工具，但 React Native 擁有顯著的第三方生態(tài)規(guī)模優(yōu)勢(shì)。而且必須承認(rèn)，Dart/Flutter 這樣的孤立社區(qū)基本不可能重現(xiàn) JavaScript/React 這樣的強(qiáng)大生態(tài)系統(tǒng)。

使用 React Native 與 Flutter 的公司

React Native 的發(fā)展壯大離不開(kāi)眾多企業(yè)的不懈努力。除了 Meta/Facebook 之外，微軟也在大力投資 React Native 項(xiàng)目開(kāi)發(fā)。項(xiàng)目核心團(tuán)隊(duì)一直與微軟開(kāi)發(fā)者在各個(gè)方面上開(kāi)展合作，微軟一方還使用 React Native 重寫了許多應(yīng)用程序，并為其構(gòu)建了大量工具和庫(kù)。事實(shí)上，微軟最近甚至宣布連 Windows 中的主 Settings 應(yīng)用就有一部分是用 React Native 編寫的！

除了 Meta（Facebook 與 Instagram）和微軟之外，React Native 還得到了 Coinbase, Shopify, Mercari, Discord, Pinterest, 特斯拉, 沃爾瑪, Wix, Salesforce, NFL, MLS 以及 Uber Eats 等大型組織機(jī)構(gòu)的廣泛使用。

Flutter 的支持力量主要來(lái)自 Google，而縱觀整個(gè)發(fā)展歷程，Google 對(duì)項(xiàng)目的支持表現(xiàn)只能說(shuō)是喜憂參半。另有一些企業(yè)也在使用 Flutter，包括豐田、eBay 與阿里巴巴，但大部分開(kāi)發(fā)工作還是由 Google 親自推動(dòng)。

話雖如此，但 Flutter 在開(kāi)放性、全面開(kāi)源、社區(qū)的持續(xù)參與以及反饋驅(qū)動(dòng)開(kāi)發(fā)方面做得很好。與之對(duì)應(yīng)，React Native 給人的感覺(jué)就有點(diǎn)以自我為中心，一般優(yōu)先考慮 Meta/Facebook 的實(shí)際需求，之后再把成果推向外部。但 React Native 核心團(tuán)隊(duì)一直在努力讓項(xiàng)目轉(zhuǎn)向社區(qū)驅(qū)動(dòng)。

小總結(jié)：React Native 占優(yōu)勢(shì)。這個(gè)問(wèn)題比較復(fù)雜，涉及很多細(xì)小差別，這里就不過(guò)多贅述了。

動(dòng)態(tài)更新（代碼推送等）

很多項(xiàng)目其實(shí)并不需要?jiǎng)討B(tài)更新，但不少企業(yè)客戶倒是因?yàn)檫@個(gè)喜歡上了 React Native，因?yàn)樗軐?duì)應(yīng)用程序進(jìn)行動(dòng)態(tài)更新、從而避過(guò) App Store 和 Play Store 復(fù)雜的審批流程。Flutter 這邊就沒(méi)有類似的設(shè)計(jì)，在未來(lái)發(fā)展路線圖上也沒(méi)提到。

小總結(jié)：優(yōu)勢(shì)在 React Native。

所以，我們到底該用 React Native 還是 Flutter？

具體要分情況。二者各有利弊，選誰(shuí)不選誰(shuí)、要看具體取舍……雖然網(wǎng)上關(guān)于這個(gè)問(wèn)題總是吵得沸沸揚(yáng)揚(yáng)，但還就真沒(méi)個(gè)確切的答案、二者的差異也著實(shí)不太明顯。

前文已經(jīng)提到，市場(chǎng)上的技術(shù)人才儲(chǔ)備直接決定著招聘難度，這可能是具體選擇時(shí)的首要考量因素。如果你已經(jīng)擁有使用 JavaScript/TypeScript 的 Web 及后端開(kāi)發(fā)人才，特別是已經(jīng)在使用 React，那么 React Native 肯定是更好的答案。

如果你站的是 Java 或者 Android 這隊(duì)（掌握 Java/Kotlin 的開(kāi)發(fā)者可以輕松上手 Dart），而且/或者需要更統(tǒng)一、更流暢的 UI，那 Flutter 的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。雖然招聘難度也許更高，但 Flutter 至少還提供更好的開(kāi)發(fā)者體驗(yàn)與性能表現(xiàn)。

總之，在拋開(kāi)了“正確的廢話”之后，現(xiàn)在大家又多了一點(diǎn)指導(dǎo)權(quán)衡思考的素材。

寫在最后

這個(gè)話題著實(shí)敏感，稍不注意就要挨罵，所以我得再說(shuō)幾句免責(zé)聲明。首先，這只是我的個(gè)人觀點(diǎn)。我做的就是 React Native 咨詢業(yè)務(wù)、而且與 React Native 核心團(tuán)隊(duì)保持合作，所以我不會(huì)說(shuō)自己的觀點(diǎn)有多么客觀公正。但我確實(shí)做了不少研究，充分考慮到兩大平臺(tái)的業(yè)務(wù)合作現(xiàn)狀，也在撰稿時(shí)參考了幾位 Flutter 開(kāi)發(fā)者的修改意見(jiàn)。他們也許不同意我的觀點(diǎn)和結(jié)論，但我確實(shí)有認(rèn)真考量他們的反饋信息?？傊?，我希望盡可能在文章中公平討論這個(gè)問(wèn)題。

我也不關(guān)注那些什么美學(xué)、優(yōu)雅層面的問(wèn)題，例如 Dart 和 TypeScript 的語(yǔ)法、或者 JSX 和 Dart 的功能部件結(jié)構(gòu)誰(shuí)更好之類。這些屬于個(gè)人喜好問(wèn)題，爭(zhēng)來(lái)爭(zhēng)去也不會(huì)有確切的結(jié)論，也不至于給框架的可用性帶來(lái)任何本質(zhì)影響。Dart 和 JavaScript/TypeScript 之間當(dāng)然有區(qū)別，但這又是另一個(gè)話題，不在本文的討論范圍內(nèi)了。

最后，對(duì)本文觀點(diǎn)持贊同或不同意見(jiàn)的讀者，都不妨在留言中聊聊自己的看法。

原文鏈接：

https://shift.infinite.red/flutter-is-better-than-react-native-fed10c92a768