Flutter VS ReactNative

Flutter 简介

目前 Hybrid App 主要分为两类: (1) 通过 WebView 加载本地网页，App 相当于本地网站。如 PhoneGap、Cordova、IOnic。 (2) 原生控件的跨平台抽象，如 ReactNative、Weex。

Flutter 走了不一样的路：自己开发了一套原生控件，每个平台实现一遍，然后把渲染引擎（这套控件）打包在每个应用里面，因此性能没有问题，平台差异也很小。

之所以不适用原生控件，是因为 Flutter 希望最终结果是更高质量的，如果 Flutter 使用原生系统 widget，Flutter 应用的质量和性能将受到这些 widget 本身质量的限制。

Flutter 和 ReactNative 底层架构的比较

React-Native、Weex 核心是通过 Javascript 开发，执行时需要 Javascript 解释器，UI 是通过原生控件渲染。Flutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）构建。

Skia 是一个 2D的绘图引擎库，其前身是一个向量绘图软件，Chrome 和 Android 均采用 Skia 作为绘图引擎。Android 自带了 Skia，所以 Flutter Android SDK要比 iOS SDK小很多。

在 ReactNative 中，引入了虚拟 DOM 来减少DOM的回流和重绘，系统将虚拟 DOM 与真正的 DOM 进行比较，生成一组最小的更改，然后执行这些更改，以更新真正的 DOM。最后，平台重新绘制真实的 DOM 到画布中。

React Native 是移动开发的一大进步，并且是 Flutter 的灵感来源，但 Flutter 更进一步。 在 Flutter 中，UI 组件和渲染器已经从平台中集成到用户的应用程序中。没有系统 UI 组件可以操作，所以原来虚拟控件树的地方现在是真实的控件树。Flutter 渲染 UI 控件树并将其绘制到平台画布上。

UI 一致性

Flutter 因为是自己做的渲染，因此在iOS和Android的效果基本完全一致。
ReactNative存在将RN控件转换为对应平台原生控件的过程，存在一定的差异（如之前在调研里提到过的Button在iOS和Android下面显示效果不一样）。

动态化技术

Flutter使用的Dart语言，支持AOT和JIT两种模式，在Dev时候，通过JIT可以实现热重载，开发者可以即时的看到代码修改的效果。而在Release Build的时候，通过AOT事先编译，来最大化的优化性能。因此目前Flutter不支持代码的热更新。

ReactNative 的代码通过加载 JSBundle.js执行，JSBundle.js可以保存在本地，也可以通过远程加载。目前有很多RN的热更新方案供选择。

App体积

Flutter iOS空项目 30M左右，Android空项目 7M左右。 （iOS需要额外集成Skia）
ReactNative iOS空项目 3M左右，Android20M左右。（Android会加入OKHttp导致体积增大）

Flutter 部分的底层功能在 Android 系统上已经有实现，因此 Android 上适配要好（RN在 Android 上有可能遇到兼容性问题）。ReactNative 在 iOS上面兼容性更优，facebook 官方很多 iOS only 的控件直接移植自 Native。并且目前 Flutter 还处于 beta阶段，issue比较多，在 demo上遇到键盘遮挡的问题，官方也需要等下一个版本解决。

使用案例

Google 的 AdWords 已经使用了Flutter进行开发。
国内阿里巴巴的闲鱼 Team 已经在部分页面使用了Flutter并输出了很多相关的技术文章。 https://juejin.im/user/5ac2db47f265da2393774122
https://flutter.io/showcase/

国外Facebook、Skype、Walmart、Uber、Instagrams
国内京东、QQ、手机百度等App使用ReactNative构建。
http://facebook.github.io/react-native/showcase.html

第三方Library数量

Flutter 目前有1000+ library。
ReactNatve 专用library有11000+ （以react-native名称开头的包），与web开发可以共用的包700000+。

Flutter的优势

• 运行效率上，Flutter和ReactNative都可以达到理论上的60帧的刷新率，来实现「Native般的流畅体验」，Flutter是全Native在执行，基于底层代码(Android 上为 C++ with NDK,iOS 上为 C++ with LLVM)，而ReactNative是Native控件 + JavaScript代码，实际性能上，Flutter应该优于ReactNative，据官方文档，Flutter可以在支持的设备上达到120FPS，而ReactNative的文档上，只提到了可以达到60FPS（RN是否支持120FPS未深入调研，文档上 RN 可以通过优化 diff 的方法提升渲染效率）。

[Flutter Performance Profiling]
https://flutter.io/ui-performance/
Flutter aims to provide 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120Hz updates.

[ReactNative Performance]
https://facebook.github.io/react-native/docs/performance

• 兼容性上，Flutter 提供的 widget 都是基于 skia来实现和精心定制的，与具体平台没关，所以能保持很高的跨 os 跨 os version 的兼容性。
  Flutter 从更基础的层去抹平平台差异，站在了更宽广、更可控的一个基础平台上去演变和发展。

• Flutter 官方提供了大部分 Material Design 控件的实现（甚至比 Android Design Support 实现的更多）。

Flutter目前的不足

• Flutter官方没有对平板下的运行情况进行测试，有可能一些组件存在issue，目前所有widget都没有对平板进行特殊适配。

https://flutter.io/faq
We do not test on tablets, so there may be issues with some widgets on tablets. We have not implemented tablet-specific adaptations in our widgets.

• 不支持3D

https://flutter.io/faq
Today we don’t support for 3D via OpenGL ES or similar. We have long-term plans to expose an optimized 3D API, but right now we’re focused on 2D.

• 不支持windows app，ReactNative 可通过微软的https://github.com/Microsoft/react-native-windows 开发 windows UWP 和 WPF 程序。

• 版本尚不成熟，目前 Flutter 官方建议的稳定版本还是 beta 版本。目前存在很多 issue，在目前调研中遇到的有「flutter doctor」环境检查误报错误、text input 会被软键盘遮挡、在设备上hot reload经常掉线等，很多问题官方的回应都是「will be fixed in next release」。

• 官方提供的组件大部分都以 Material Design 为主，iOS风格的组件比较少，对于需要用到 iOS 风格组件的情况，都需要自己手动绘制组件。

• 社区尚不成熟，开发中遇到问题，在官方文档、StackOverFlow 上都没有相关资料，最后在Github 的issue里找到了。

参考资料

[为什么说Flutter是革命性的？] https://www.sohu.com/a/192998605_635110

[闲鱼技术 ReleaseFlutter的最后一公里] https://juejin.im/post/5b456ebee51d4519277b7761

[React Native VS Flutter评测] https://juejin.im/post/5b1e8b826fb9a01e3962618d

[深入理解 Flutter 的编译原理与优化] http://www.sohu.com/a/239579799_629652

[slant上关于ReactNative和Flutter的讨论]
https://www.slant.co/versus/4650/17635/~react-native_vs_flutter

 

本文转自我的技术博客 https://www.cc-lab.cn/flutter-vs-reactnative/