React|React Native VS Flutter评测 ReactNativeVSFlutter评测

【React|React Native VS Flutter评测】

文章图片
image
之前分别用iOS原生和Flutter写了一个空气质量App并对它们对性能、容量等做了对比评测. 很多小伙伴在下方留言说这样的对比没有意义, 认为Flutter根本不是用来替代原生也不可能超越原生开发. 我这里先做一个解释:
我在对比评测中提供了尽可能多的数据, 并不是想证明Flutter和原生比有多烂, 而是想告诉你如果选择了Flutter你的App包会增长多少倍、对App启动速度的影响会有多少秒, 好让大家将来在定技术栈的时候能够尽量心中有数.
当然也有网友提出和应该React Native来做对比, 毕竟这两个都是主攻跨平台开发. 其实我早就想做一个类似的对比评测, 前段时间公司出现变动, 周末难得抽空做了一个React Native版的Demo, 最终得出了今天这份评测报告.
Aireport(iOS原生)
Aireport Flutter(Flutter版)
RN版还在审核中, 大家可以自行下载体验一下.
1.安装包大小
Flutter应用安装包和安装后容量

文章图片
image
React Native应用安装包和安装后容量

文章图片
image
这个差距, emmmmmm, 这里给出iOS原生版应用的大小大约在2.5MB, 也就是说RN已经做到了比原生还要小的安装包. 这主要归功于两点:

基于iOS自带的UI框架而非Flutter这样的自有框架(Flutter SDK有30MB左右)
使用了OC而非Swift作为开发语言(本次预测大失败, Swift5并没有随着WWDC放出, 也就没能集成到iOS12中....)
iOS原生版其实实现了比其他版本更多的功能, 比如Weiget、通知

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

文章图片
image
启动速度RN依然与原生不相上下, 并且要比Flutter好上一个等级. RN虽然使用js来构建应用程序, 但最终RN会将js转化成原生代码. 这就让RN的运行效率高出Flutter好几倍.
3.内存占用

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

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

文章图片
image
Flutter帧率

文章图片
image
iOS原生帧率

文章图片
image
我们可以看到, 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(Flutter版)
Aireport Flutter(React Native版)