Flutter KO React Native? 让时间去决定吧...

Posted 2021-04-29 知识小集

最近 「 Flutter 自习室 」经常有同学问，Flutter 和 React Native 有什么区别？由于 Flutter 是 Google 对标 React Native 的跨平台移动开发方案，所以这两者之间还是有许多可比性的。

当然由于两者推出的时间相隔大概 2 年，而 Flutter 还处于起步阶段，所以当前阶段，这两者的比较是不对等的。也许再过两年，Flutter 成长起来后，两者的比较会更可靠一些。不过既然有疑问，所以这里就整理一下目前网上的一些资料，来做个简单的对比。

我们先来看个对照表：

下面我们就根据这张对照表，展开简要说明一下。

UI 构建方式

这两个平台在用户界面的构建方式差异上很大。

React Native 最终是以原生的 ios 或 android 组件来渲染界面。在某些情况下，我们可以使用 Native Module 的方式来自定义组件，在 JS 端通过 NativeModules 来引用 Native 组件。

而 Flutter 是有自己专属的一套 Widget，并通过自己的渲染引擎来绘制界面。Android 上使用 Material Designed Widget，iOS 上使用 Cupertino Widget。

Flutter 构建 UI 的方式还是让人心情复杂。其专有的 Widget 在自定义 UI 中增色不少，Flutter 团队也承诺将加强与 Native 组件的互操作性。不过，由于 Flutter 还在起步阶段，其 Cupertino 库还缺少很多基本组件，而 React Native 在这一方面已经比较成熟了。

Native 视觉和感受

React Native 和 Flutter 都承诺提供原生组件的感观。在这一方面，对 React Native 的正面评价已经很多了，对 Flutter 的评价却很少，而且有些还是负面评价。

当然，Flutter 开发社区还需要积累更多的最佳实践，以提供更好的跨平台交互体验。不过，现在 React Native 社区已经比较成熟了，而 Flutter 又是对标 React Native 的，所以这方面可以参考 React Native 社区的发展。

性能

从技术上来讲，Flutter 的运行速度应该更快，因为 Flutter 没有与本地组件交互的 javascript Bridge。那是否就意味着 Flutter 在性能上就一定优于 React Native 呢？事实经验是：No。

目前 React Native 构建的 App 在性能上的表现已经很不错了，甚至可以和原生 App 媲美。在大部分情况下，React Native 都能平滑地运行，在很多具有挑战性的任务中（60 fps）都有很好的解决方案。

当然，Flutter 将 60 fps 作为目标的。

成熟度

React Native 是在 2015 年发布的，经过 2 年多的发展，已经比较成熟，虽然至今没有发布 1.0 版本。React Native 社区发展也很成熟，并且为 React Native 社区贡献了大量的开源代码。

而 Flutter 是在 2017 年 5 月发布的，而 Beta 版本也是今年 3 月份才发布，社区也刚刚发展，特别是在国内。所以，Flutter 还需要时间，才能成为跨平台移动开发广泛采用的解决方案。

JAVASCRIPT VS DART

毫无疑问，在编程语言之间进行选择是一个巨大的决定因素。从某种意义上讲，Dart 和 Javascript 不是一个量级的。

截至 2018 年，JavaScript 是 GitHub 上最流行的语言。从前端到后端，从 PC 到移动端，Javascript 都表现出了其强大的实力。而 Dart，笔者在之前从未听说过这门语言（孤陋寡闻了），在 Google 之外，Dart 并不流行。

有个笑谈，为什么 Flutter 会选择 Dart？因为 Dart 团队就在 Flutter 团队隔壁，有问题随时可以问。当然笑谈归笑谈，Dart 语言自身的特性，类型安全、富有表现力，对标 Javascript，对移动开发人员，特别是有 React Native 和 Javascript 基础的开发人员来说，还是很友好的，学习曲线相对平缓。

至于 Flutter 为什么选择 Dart，可以参考 为什么Flutter会选择 Dart ？http://www.infoq.com/cn/articles/why-flutter-uses-dart

行业使用

React Native 是由 Facebook 推出的，最初在 Facebook 自己的项目中使用，而后不少主流的应用程序也采用了 React Native 的方案，如下面几个：

国内很多公司也对 React Native 做了很多研究，并有相应的产出，如一些基于 React Native 发展出来的跨三端的技术。

而 Flutter 在这方面却乏善可陈，拿得出手的并不多。有一款应用 Hamilton，是目前应用 Flutter 最成熟的应用，另外开源中国也基于 Flutter 开发了一个客户端，并且在 Github 上开源 https://github.com/yubo725/FlutterOSC，大家可以有兴趣研究一下。

生产效率

React Native 受欢迎的很大一个原因是它的生产效率。而 Flutter 的目标之一也是高效的开发。除了跨平台的优势之外，还有一些其它生产效率方面的特性，我们也可以来比较一下。

Hot Reload

如果你是 Native 开发，一定对 Android 和 Xcode 的编译效率无力吐槽。可能改几行代码，开始编译，然后就可以去接咖啡了，回来也许刚刚好，程序跑起来了，甚至更糟。跑起来后，还得从头走一下流程，进到你要调试的页面。

而 Flutter 和 React Native 的一大优势正是在这一方面：它们都支持 Hot Reload。修改代码后，只需要重新加载资源，而且可以保持在同一页面上，甚至于保留原来的表单输入。

配置和设置

相较于 React Native，Flutter 的设置和配置更加简单。Flutter doctor 可以自动检查系统问题，整个设置过程更直接。

工具

React Native 的各种 IDE 工具已经很齐全，所以 Flutter 在这方面没有什么优势。不过，Flutter 的表现也不错，支持 IntelliJ、Android Studio、Visual Studio Code，且各种相关的插件也在不断发展中。

硬件相关的 API

React Native 现在已经提供了各种硬件相关的 API，如 Wi-Fi、GEO、相机、传感器等，这些第三方的解决方案都相对成熟。不过，React Native 的问题在于图形绘制这一块。如果我们想自定义一些图形绘制相关的组件，就必然会涉及到 Native 代码。

而 Flutter 是自有的渲染引擎，可以更灵活的来定制各种图形组件。同时，除了蓝牙和 NFC 外，其它硬件相关的 API 也正在不断发展。从这方面讲，Flutter 后面或许会胜出。

生命周期管理和优化

生命周期的管理对于前端各个领域来说，也是一个大话题。在这一方面，React Native 做得更好，而且现在针对 React Native 的状态管理框架也很多。而 Flutter 目前只能使用 Widget 来继承实现无状态和有状态组件，同时没有工具来明确地保存应用程序的状态。不过，相信后面各种框架也会不断出现。

代码结构

在这不得不吐槽一下，Flutter 中通过代码来构建一个页面的结构和布局样式确实有点混乱。相比而言，React Native 中通过 JSX ，以声明式的结构来描述一个页面结构，同时分离页面结构和样式的方式，开发起来更加舒服一些。

社区

作为一个新生儿，Flutter 在开发者社区中得到广泛的关注。截止目前，Flutter 在 Github 上的 star 数已到 24k ，stackoverflow 上相关的问题数也很多。当然，比起 React Native 来，Flutter 还是显得比较稚嫩。

不过，每一种新技术，都有一个成长过程，而且都会有自己的支持者和反对者。Flutter 要走的路，React Native 也走过。所以，给 Flutter 一些时间。

文档与路线图

Flutter 和 React Native 都没有明确的路线图。不过，React Native 有一个比较活跃的 Github 博客 http://facebook.github.io/react-native/blog/，每月会有一些更新。而 Flutter 也维护了一个相关里程碑 https://github.com/flutter/flutter/milestones的页面，在这里可以了解 Flutter 的进展信息。

文档方面，Flutter 还是更有优势的，文档很清楚。而 React Native 的文档感觉只是写给 React 开发者的，不懂的去看 React 的文档，特别是对很多组件的描述，都不是很细致，希望这个后面能改善吧。

小结

如果真要做比较，现阶段 React Native 无疑赢家。不过我觉得这种比较更像是大人和小孩之间的比较，毕竟 Flutter 处于起步阶段。所以，还是把裁判权留给时间吧。

当然，Flutter 还有些潜在的问题，是需要我们关注的：

• Dart 相对 Javascript 来说，接受度还是太低；

• 业界对 Flutter 的态度；

• 如果你了解过 Google Graveyard，在采用 Google 的新技术之前，就可能会再三考虑。

最后，「 小集 」团队在 Github 上开了一个 repo，来收集国内关于 Flutter 的开发资源 https://github.com/awesome-tips/flutter-resources，欢迎大家一起来维护。同时我们开通了微信群 「 知识小集 · Flutter 自习室 」，有兴趣的小伙伴可以先加好友 coldlight_hh (南峰子) 或者 bob5201215(zb)，然后邀请您入群。加好友时请注明 "Flutter 自习室 入群"。

参考

1. Flutter vs React Native comparison for Q1 2018https://agileengine.com/flutter-vs-react-native-comparison/

2. Flutter vs React Native – What Would You Prefer for Your Next Hybrid Mobile App? https://dev.to/vipinjain/flutter-vs-react-native--what-would-you-prefer-for-your-next-hybrid-mobile-app-2i3m

3. Flutter vs React Native - What You Need To Knowhttps://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3c90b