比较React Native与Flutter
本文记录的是我在 2024 年为一个小型 Android/Web 设备控制面板做开发时的个人体验,不是当前版本的完整对比或性能测试。React Native、Expo 和 Flutter 都在持续更新,文中的构建和生态判断可能已变化,请以各自的现行文档为准。
本人最近在写一个设备的控制端,可以制作成手机APP或网页。我所知道如何使用的开发方式只有React Native和Flutter。一开始打算使用React Native进行开发,后来因为遇到的问题太多了,所以转而使用Flutter进行开发,两小时完成了我之前写了几天React Native的工作量。
本文将从各个我最关注的方面对二者进行比较。
环境配置
React Native需要先安装npm,再使用命令行工具创建项目。
如果使用的是Expo,可以通过 EAS 在云端构建,也可以配置本地 Android 构建环境。Expo 的本地构建方式和平台支持会随工具版本变化;参见 EAS Build 文档,不要把我当时的本地环境限制当作当前限制。顺带一提,我当时觉得 Expo 编译很慢。
如果不使用Expo则只需要确保你有JDK和Android SDK和一些其它命令行工具,然后进行编译即可。
然而,Flutter可以直接安装Dart和Flutter以及Android SDK及其命令行工具,再新建一个Flutter项目,直接编译不会遇到什么问题。
另外,我当时在使用 Expo 构建的时候经常因为网络原因卡着不动,而 Flutter 没有遇到这个问题。可能与我当时使用的网络有关。
不只是我,我在网上看到许多人也觉得Flutter比React Native的安装成功概率大。
这把Flutter胜。
开发体验
React Native可以用JS或者TS。Flutter只能使用Dart。
作为一个坚定的Object Pascal拥护者,以上用的语言对我而言都有些陌生,但是基本上看一眼示例就会写了。所以使用的语言这一块其实没有多大影响。
另外个人感觉各种Flutter的教程/文档都比React Native的教程/文档易于理解。在查阅资料时,因为React本身是一个Web前端框架,但是React Native与React不完全兼容,这会导致我在查阅有关资料的时候不能闭着眼睛从stack overflow复制粘贴。
再一个是如果我用React Native进行开发,我需要拖着一个质量比黑洞还大的node_modules,这玩意儿我看着觉得太膈应了,大大的抵触。
这把Flutter胜。
生态
经常需要用到一些花里胡哨的组件。
很多时候是React有,但是React Native不兼容。
我之前尝试用create-react-native-app创建应用程序,然后不知道怎么创建路由以及跳转了。以及我直到把React Native项目的目录删掉,也没有明白上面标注的“Web”到底是想让我怎么把这玩意儿部署成Web应用程序。这些问题在Expo上不存在,但是我不太想用Expo,因为Expo又在某些方面对我非常不友好。
上述问题在Flutter里不能说完全不存在,至少我还没遇到过。
这把Flutter胜。
构建
我抵制绝对封闭的苹果,所以没有构建苹果应用的打算。这里建立在我使用安卓和Web端的条件下讨论这个问题。
当时我想把 Android 应用拆成按 ABI 区分的安装包,因为自己几乎只使用 aarch64。Android 的 AAB/APK 产物和 ABI 拆分取决于 Gradle、项目配置与分发方式,不应把下面的经历理解为 Expo 当前不支持这些能力;参见 Expo Android 构建文档 和项目自己的 Gradle 配置。
我当时通过修改原生 Gradle 配置实现了这个需求。Expo/EAS 项目也可以通过原生配置定制构建,不过需要理解 prebuild 和 Gradle 的配置方式;具体做法以当前文档为准。
我当时还不喜欢本地构建在临时目录中复制项目的行为。EAS 的构建模式和 --local 选项会随版本变化;当前 CLI 将本地构建标为实验性功能,详见 EAS CLI 文档。
Flutter只需要给构建命令加个参数就可以达到我的需求,非常省事。另外Flutter构建的速度比上述二者都要快得多。
在我的那次构建中,Expo 生成的安装包最大,create-react-native-app 次之,Flutter 最小。这个结果依赖项目、依赖和构建配置,不是通用的体积结论。
这把Flutter胜。
体验
对于最后发布出来的应用,二者相比起来怎么样,其实我没有自己测试过,因为我没有高性能这方面的需求。
不过参考了一些文章,我猜 Flutter 可能更适合我的情况。这个判断没有经过实际性能测试,不应视为结论。
参考:https://www.zhihu.com/tardis/bd/art/70070316
总结
对我而言,在我的这个应用中,Flutter比起React Native,那是遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先,遥遥领先……