一些flutter和react native对比的文章
[关于性能]
跨平台开发第一个考虑的就是性能问题
RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好;
Flutter 吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染
[关于开发体验]
Hot Reload(热重载),这个对于原生开发者是一个福音,特别是Android开发者,Android原生改一个东西运行需要好久时间;对于Cordova和RN,差别不大,两个基本都可以支持热重载
Widget(组件)
这点和RN的component有些类似,但是比RN更彻底,Flutter自身提供了很多基于 Material Design and Cupertino (iOS-flavor) 风格Widget,这点也和Google对它的定位有关(Flutter is Google’s mobile UI framework),大家在开发的时候更简单,特别对于美工UI设计师薄弱中小公司更是福音; 其他
Dart Flutter使用了新的开发语言,这个语言相信大家都没听说过,这个google推出的新的编程语言,属于动态语言,”结构化的web编程”语言,语法与Javascript 的ES6标准有些类似,有Java和C#语言基础,理解起来不难.缺点是程序猿们又要学习一门新语言了;
除了效率和Widget之外,最期待的还是Flutter的渲染方式,不说跨平台的开发语言,就单单Android原生开发,不同的手机对不同控件的渲染可能就有不同,希望Flutter自己的渲染平台能解决这个问题
从实现原理上来讲 ReactNative 提供的组件都是继承自原生 Native 的 View 组件,比如ReactNative 中的 ListView 在 Android 中就是继承自 ListView ,还有 RecycleView。然而 Flutter 则不同,它的所有 UI 组件都是一帧一帧画出来的。这样也能够很准确,也很灵活的做出你想要的 UI 。其次它还非常人性化的贴近了平台的特性,比如 Android 的 Material Design 在 Flutter 就默认支持了进去。其实话说回来,在开发者角度来讲这两个跨平台都是一样的使用效果,毕竟都是通过一套语言来搭建可运行不同平台的应用。然而,Flutter 使用 Dart 语言开发而 ReactNative 则使用 JS 结合 XML 来开发的。这就有问题了。
React Native较小的安装包带来的优势不仅是降低了下载门槛、减少了磁盘占用, 而且对于混合开发的压力也更小. 试想一个原生App因为几个页面使用了Flutter, 一行代码没写安装包就凭空增加了30MB, 这样的结果不是开发人员希望看到的.
启动速度RN依然与原生不相上下, 并且要比Flutter好上一个等级. RN虽然使用js来构建应用程序, 但最终RN会将js转化成原生代码. 这就让RN的运行效率高出Flutter好几倍.
内存占用方面, RN显然没有原生做的好, 与Flutter的差距也不大, 而且经测试发现, RN的内存占用不是很稳定, 页面刚生成的时候内存占用会高一点, 之后缓慢回落.
1.Flutter在高低端机的CPU上的表现都优于RN,尤其在低端的小米2s上有着更优的表现
2.Android端在原来FPS基础上增加了流畅度的指标,FPS和流畅度的表现Flutter优于RN(计算规则见附参考文章)
3.Android端的内存也是值得关注的一点,在小米2s上起始内存Flutter明显比RN多40M,RN在测试过程中内存飞涨,Flutter相比之下会更稳定,内存上RN侧的代码是需要调优的,同一套代码Flutter在Android和iOS上并没有很大的差异,但是RN的却要在单端调优,Flutter在这项比拼上又更胜一筹。 比较奇怪的是三星S8上Flutter和RN的初始内存是一致的,猜测是RN也Android高端机型上也会预分配一些内存,具体细节还需要更进一步的研究。
ReactNative在满帧的情况下实际是卡住的,不能切换路由,后端服务关闭后仍然会执行一段时间,证明有事件堆积。
而Flutter不会影响路由切换,因为Flutter的路由切换在ui主线程上,而react-navigation跑在js线程上。Flutter虽不满帧但可以实时更新数据。
总结:在某些高性能场景下仍需要跨平台,Flutter是你唯一的选择!
Flutter的性能还可以进一步优化,例如采用udp发送行情数据、protobuf替换掉json也会有比较好的收益
Flutter为布局提供了丰富的组件类,具体请查看API https://flutterchina.club/docs/。但是相对比较麻烦的,比如Image组件就分为new Image.network(加载网络图片)和 Image.asset(加载本地图片),在测试中我使用过这个组件,但是不知道什么原因,width属性设置了也没见效果,height和其他的属性倒是没什么问题。
React Native带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React Native 推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建(摘自网络)。
React Native使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,则需要使用state(摘自网络)。
在性能方面Flutter还是比React Native快一点,开发难度方面React Native比Flutter更加简洁方便,
架构思想上React Native也相对较好。