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

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

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

但這樣的回答說了等于沒說。廢話文學(xué)解決不了問題，正面對線才是群眾們喜聞樂見的場面。所以，咱們就整點直接的、刺激的，聊聊 Flutter 和 React Native 誰更強。

這話題，重要嗎？

其實不重要，但不重要不代表沒意思：性能、開發(fā)者體驗、Dart 與 JavaScript、本機集成、標準庫等等都是很有意思的話題，都值得拿來一聊。

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

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

說重要也重要，對于一家打算開發(fā)新應(yīng)用的企業(yè)來說，以下幾個問題就是無法回避的現(xiàn)實考量：

招聘

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

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

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

共享代碼、知識與開發(fā)者

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

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

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

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

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

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

那，其他因素呢？

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

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

開發(fā)者體驗

Flutter 團隊（乃至整個 Google）真的很擅長設(shè)計開發(fā)者體驗。

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

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

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

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

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

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

性能

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

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

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

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

統(tǒng)一的 UI 體驗

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

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

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

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

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

原生集成

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

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

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

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

國際化水平

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

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

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

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

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

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

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

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

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

Web 支持

Flutter 2 宣布將支持 Web 及其他平臺。

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

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

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

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

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

第三方庫

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

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

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

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

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

使用 React Native 與 Flutter 的公司

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

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

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

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

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

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

很多項目其實并不需要動態(tài)更新，但不少企業(yè)客戶倒是因為這個喜歡上了 React Native，因為它能對應(yīng)用程序進行動態(tài)更新、從而避過 App Store 和 Play Store 復(fù)雜的審批流程。Flutter 這邊就沒有類似的設(shè)計，在未來發(fā)展路線圖上也沒提到。

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

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

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

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

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

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

寫在最后

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

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

最后，對本文觀點持贊同或不同意見的讀者，都不妨在留言中聊聊自己的看法。

原文鏈接：

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