Flutter与React Native

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自己的渲染平台能解决这个问题


Flutter 和 ReactNative 的区别


从实现原理上来讲 ReactNative 提供的组件都是继承自原生 Native 的 View 组件，比如ReactNative 中的 ListView 在 Android 中就是继承自 ListView ，还有 RecycleView。然而 Flutter 则不同，它的所有 UI 组件都是一帧一帧画出来的。这样也能够很准确，也很灵活的做出你想要的 UI 。其次它还非常人性化的贴近了平台的特性，比如 Android 的 Material Design 在 Flutter 就默认支持了进去。其实话说回来，在开发者角度来讲这两个跨平台都是一样的使用效果，毕竟都是通过一套语言来搭建可运行不同平台的应用。然而，Flutter 使用 Dart 语言开发而 ReactNative 则使用 JS 结合 XML 来开发的。这就有问题了。


React Native VS Flutter评测


React Native较小的安装包带来的优势不仅是降低了下载门槛、减少了磁盘占用, 而且对于混合开发的压力也更小. 试想一个原生App因为几个页面使用了Flutter, 一行代码没写安装包就凭空增加了30MB, 这样的结果不是开发人员希望看到的.
启动速度RN依然与原生不相上下, 并且要比Flutter好上一个等级. RN虽然使用js来构建应用程序, 但最终RN会将js转化成原生代码. 这就让RN的运行效率高出Flutter好几倍.
内存占用方面, 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高端机型上也会预分配一些内存，具体细节还需要更进一步的研究。


高频数据交换下Flutter与ReactNative的对比


ReactNative在满帧的情况下实际是卡住的，不能切换路由，后端服务关闭后仍然会执行一段时间，证明有事件堆积。
而Flutter不会影响路由切换，因为Flutter的路由切换在ui主线程上，而react-navigation跑在js线程上。Flutter虽不满帧但可以实时更新数据。
总结：在某些高性能场景下仍需要跨平台，Flutter是你唯一的选择！
Flutter的性能还可以进一步优化，例如采用udp发送行情数据、protobuf替换掉json也会有比较好的收益


Flutter与React Native


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也相对较好。

总体来说Flutter更优秀，并且阿里的闲鱼团队已经深度使用了了Flutter