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://juejin.im/user/5ac2db47f265da2393774122>
https://flutter.io/showcase/ <https://flutter.io/showcase/>

国外Facebook、Skype、Walmart、Uber、Instagrams
国内京东、QQ、手机百度等App使用ReactNative构建。
http://facebook.github.io/react-native/showcase.html
<https://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/ <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
<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 <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 <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
<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
<https://www.sohu.com/a/192998605_635110>

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

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

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

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

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

热门工具换一换