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应用安装包和安装后容量 这个差距, emmmmmm, 这里给出iOS原生版应用的大小大约在2.47MB, 也就是说RN已经做到了比原生还要小的安装包. 这主要归功于两点:

• 基于iOS自带的UI框架而非Flutter这样的自有框架(Flutter SDK有30MB左右)
• RN最终转换的代码为OC而对比的原生应用使用了Swift编写(本次预测大失败, Swift5并没有随着WWDC放出, 也就没能集成到iOS12中....)

React Native较小的安装包带来的优势不仅是降低了下载门槛、减少了磁盘占用, 而且对于混合开发的压力也更小. 试想一个原生App因为几个页面使用了Flutter, 一行代码没写安装包就凭空增加了30MB, 这样的结果不是开发人员希望看到的.

2.启动速度

启动速度RN依然与原生不相上下, 并且要比Flutter好上一个等级. RN虽然使用js来构建应用程序, 但最终RN会使用js来调用成原生代码生成原生UI控件. 至于Flutter, 正如我之前的评测中说的, 其App启动的过程包含一个原生App启动过程直至第一个原生VC初始化过程+Flutter运行时环境的初始化过程, 这个过程无疑拖累了Flutter的最终结果.

3.内存占用

内存占用方面, RN显然没有原生做的好, 与Flutter的差距也不大, 而且经测试发现, RN的内存占用不是很稳定, 页面刚生成的时候内存占用会高一点, 之后缓慢回落.

通过Xcode工具我们可以看到, RN(React Navigation)并没有使用iOS系统的导航系统, 而是以一种相对粗暴的形式直接覆盖在了上一个View上. 相反iOS原生系统的页面切换会在新页面显示完毕后将前一个页面去掉(不做渲染), 这样可以有效节省内存的消耗. 此外, RN的控件也没有使用UIKit中的现有组件, 而是通过最基本的UIView去组合模仿(比如NavigationBar). 这样做虽然可以减少安卓和iOS之间UI层的差异, 但显然优化的空间就变小了.

4.流畅度

React Native帧率

Flutter帧率 iOS原生帧率 我们可以看到, 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版)

Aireport(React Native版)