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

最近 「 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 2018 https://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 Know https://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3c90b

知识小集是一个团队公众号，主要定位在移动开发领域，分享移动开发技术，包括 iOS、Android、小程序、移动前端、React Native、weex 等。每周都会有 原创 文章分享，咱们的文章都会在公众号首发。欢迎关注查看更多内容。