开篇

近期大家对移动端跨平台开发框架讨论的比较火热，今天我们来全面的对比一下当今最为流行的两款移动端跨平台开发框架：新生代框架Flutter和成熟框架React Native（简称RN）。

可能大部分人对RN已经比较熟悉了，就不用过多的解释。但是对于Flutter可能大部分人还处于观望阶段，还在犹豫到底要不要学习，这个东西能发展起来吗，会不会有很多坑？希望大家在看完本篇文章后可以知道这些问题的答案。

发展史

React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

而Flutter起步比较晚，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。Flutter是完全免费、开源的，它也是构建未来的Google Fuchsia应用的主要方式。Flutter 1.0版本于2018年12月5日(北京时间)发布。

由于Flutter起步比较晚，所以Flutter出现之前，RN已经在跨平台移动应用开发领域名声大噪。

架构

在开发任何项目之前我们都会进行技术选型，选择与项目相匹配的架构，项目就成功了一半了，所以我们先从架构方面来说一下两者的区别：

RN架构

它基于 Facebook 自己使用的 Flux 架构。它的设计理念是一种称为 Javascript 桥（BridgeJS）的 JS 运行时环境。这种桥是用来同原生线程通信的。RN 的代码用 Javascript 编写，然后在运行时编译为原生代码。

Flutter架构

Flutter 使用 Dart 框架，后者又使用 Skia C++ 引擎。相比 React Native 的 Flux 架构，Dart 框架不需要任何桥接工具来通信，因为它已经内置了所需的大部分组件。它的体积相对更大一些。Skia C++ 引擎提供了所需的各种协议、通道和组合。

具体可以区别参考下图：

RN与Flutter架构图

性能

介绍完架构方面的区别，我们来看一下Flutter和RN两者谁的性能更胜一筹？

从上面框架介绍中可以知道，RN与原生通讯是通过一个桥梁BridgeJS来实现的，而Flutter使用的是Dart直接和原生通信，所以Flutter的性能更胜一筹。Flutter 具有 Dart 的优势, 并且没有 JavaScript 桥接用于处理与设备本机原生组件的交互, 开发速度和运行时间会大大加快。并且Flutter 已将动画标准设置为 60fps, 这清楚地表明了其高性能。最后, 由于 Flutter 被编译成 Android 和 iOS 的原生 ARM 代码, 性能是它永远不会面临的一个问题。

同时由于FLutter的这种特性，也解决了JS生态系统之间的许多不同版本之间兼容性的问题，比如CommonJS, AMD。RN开发人员, 在开发混合应用时面临问题, 但对于原生应用, 不会面临任何与性能相关的问题。它在所有标准情况下都提供无缝性能, 并且高度可靠。

编程语言

对于开发人员来说，开发任何应用程序都首先要考虑所使用的编程语言。市面上存在许多编程语言，大多数开发人员也掌握多种编程语言的技能。下面来对比一下 RN 和 Flutter 中使用的语言。

RN：RN中使用的编程语言是 Javascript。Javascript 是世界上最流行的语言之一，也是万维网（WWW）的三大核心技术之一。

Flutter：相比之下，Flutter 使用的 Dart 语言既不受欢迎也没那么流行。Dart 语言诞生于 2011 年，由谷歌推出。Dart 非常简单易学，因为它支持大多数面向对象的理念。

稍微懂一些 Web 开发的人就会了解 Javascript。它是最流行的语言之一。大多数 Web 框架，如 Angular、React、Vue 等也都是用 Javascript 构建的。但 Flutter 使用的 Dart 语言还很年轻。它在编程社区中鲜为人知。

用户界面

比较框架之间好坏的一个重要衡量标准就是看这款框架提供的组件与API是否够人性化，是否能够被大部分开发者所认可，这也是衡量这个框架项目组的开发人员是否认真负责的重要标准。

RN延续了React的代码风格，与 React 一样，RN 也提供 UI 渲染和设备 API。它严重依赖第三方模块来支持原生组件。RN 的 UI 渲染功能的确非常出色，但它在很大程度上依赖于第三方库。

而Flutter则是提供了一套与平台无关的UI框架，在Flutter中万物皆Widget。Flutter 拥有丰富的组件可选，如 UI 渲染组件、测试、设备 API 访问、导航、有状态管理等许多库。它几乎不需要任何第三方库。此外，Flutter 还带有用于 Material Design 的小部件。Flutter 还提供了一个名为 Cupertino 的 IOS 风格小部件，用于创建渲染水平更高的应用程序。

RN 在很大程度上依赖于第三方库提供丰富的组件和 API 访问，这一点有利有弊。开发人员可以自由选择所需的第三方库，但这种选择可能也会成为一种负担。而 Flutter 附带了创建跨平台移动应用程序所需的所有组件类型，开发人员使用 Flutter 时无需寻求任何第三方库。

社区支持

任何技术的发展过程中社区都起着至关重要的作用。如今，开发人员自发形成社区并分享他们正在研究的技术的相关知识。在社区中分享开发经验和解决问题的技巧是很有意义的。

RN自 2015 年正式发布以来，RN 蓬勃发展，广受欢迎。GitHub 上的 RN 社区非常庞大，每年都会举办很多线上 / 线下论坛和研讨会。

而Flutter相比之下还很年轻。它的社区规模还不是很大，但它正在快速增长。谷歌每年都花很大力气推广这个平台，也举办很多论坛和研讨会。相信Flutter社区会越来越好的。

最后总结

从上面几个方面的对比来看，RN和Flutter各有利弊，具体选型，还是要根据公司和项目具体情况而定。但是我相信Flutter还是很有发展潜力的，如果你问我是不是要学习Flutter，我的答案是必须学。也许Flutter会失败，即使学习了也不会有什么损失；但是如果Flutter成功了，而我们没有学习是不是相当于错过了一次很大的浪潮。而且学习Flutter也不是很难，对应前端或者移动应用开发者来说，两周基本就可以上手了。

好了，这就是所有内容了。。。