React Native 对比 Google Flutter

抽象的

我相信我们很多前端、后端开发人员，甚至是全栈工程师都会遇到这种情况：客户决定通过移动应用来扩展其客户群。这在如今非常普遍，而且是一个明智的决定，因为无论我们如何尝试移动优先的设计和布局，Web 应用最终都无法与原生移动应用相媲美。

十年前，我们别无选择，程序员们只能使用 Java 或 Objective-C 为单一平台编写本地代码。这极大地增加了后续维护和开发的成本和复杂性。Adobe 公司率先尝试通过 PhoneGap 平台改变这一现状。

PhoneGap 提供了一些基于现代 Web 开发中常用技术（例如 JavaScript 和 CSS）的简单工具。坦白说，PhoneGap 并非真正的移动应用，而只是一个经过精心包装的浏览器窗口（WebView）。因此，这无疑是一大进步，但应用失去了原生应用的所有优势，并且像浏览器内 Web 应用一样受到诸多限制。不过，对于许多简单的 API 客户端应用来说，例如目录查看器、新闻推送、内容浏览器等等，PhoneGap 已经足够用了。

当然，业界仍然迫切需要一个能够同时支持安卓和iOS平台快速开发的统一平台。而视频游戏行业在这方面发挥了重要作用。

为什么是游戏开发商？原因很简单。开发手机游戏时，为了在两个平台上运行同一款游戏，你不得不分别组建两个开发团队，并为两个平台分别制定开发流程。这种方式效率极低，有时游戏工作室甚至只专注于一个平台，只有在成功之后才将现有代码移植到新平台。

所以，为了解答这个问题，许多跨平台框架应运而生，例如 Unity、Corona SDK 等等。它们提供了一种统一的编程语言，并清晰地阐述了如何组织同一团队同时为两个平台进行开发。

这些框架现在非常流行，它们不仅支持开发移动平台应用，还支持开发PS、Xbox和PC等平台的视频游戏。这些框架采用了一种称为转译器的技术，这意味着主代码可以用任何允许的编程语言编写，但在最终编译之前，它会被转译成每个平台的原生语言，并使用相应的原生工具链进行编译。工程师们正是通过这种方式解决了技术繁杂的问题，并为业界提供了一种能够快速开发出“原生”品质应用的方法。

简报

移动应用市场每年都呈现巨大的增长。在发展中国家，你会发现很多人每天都在充分利用数字时代的便利，但他们甚至从未见过笔记本电脑或台式电脑。这听起来很奇怪，但事实上，移动用户数量已经远远超过了笔记本电脑和台式电脑用户。

作为一名全栈开发者，我深知如今不能像五六年前那样忽视移动市场，继续只专注于前端和后端开发。时代在变，规则也在变，大家都知道像 Tinder、Spotify 等那些完全没有网页客户端的爆款应用。

作为一名创业黑客，我的首要目标是在最短的时间内将想法和假设转化为可用于生产环境的产品。三个月的开发周期意味着要构建一个功能齐全的现代化网页前端和一个精心规划的后端/服务器端。

如何在已经不堪重负的流程中加入移动应用开发，同时又不大幅增加成本、时间和最终复杂性，这的确是个问题。诚然，像 PhoneGap 这样的平台提供了很大的帮助，但性能和对平台原生功能的访问又该如何保障呢？这些都让浏览器失去了优势。

但多亏了科技，我们现在有了基于知名网络技术和框架的快速原生应用程序开发框架，今天我们将测试市场上两个最流行的平台，它们为我们轻松扩展移动开发的可能性带来了巨大的机会。

在本文中，我列出了几个在我看来至关重要的要点。正如您在上方看到的，我重点关注的是在非常紧张的环境下快速原型制作和产品交付。

如何轻松入门
学习曲线
生态系统和社区
输出结果

让我们从一项被过度炒作的技术开始评测，它当然就是 React Native。就受欢迎程度而言，它在我们评测的两款技术中遥遥领先。

审查

React Native

首先，我想说明一下 React Native 作为 React 的继任者，它并不是一个框架，而是一个实现了视图（View）设计模式的库。因此，它足以胜任像产品展示或图片库之类的简单应用。但是，如果你正在开发更复杂的应用，你会需要构建更便捷的工具，例如 MVC 框架。在 MVC 框架中，视图（View）已经由 React 实现，接下来需要选择模型（Model）和控制器（Controller）来实现完整的视图模式。

在我看来，目前的情况比较复杂。一方面，你可以获得更大的灵活性，找到更适合你任务的工具。但说实话，我们所知的几乎每个框架部分都只有一两个甚至只有一个可行的解决方案，而且在90%的React项目中，你都能找到React Router、Redux、Apollo、Saga等等。当然，还有其他解决方案，但稳定性和生产就绪性方面的不足，使得它们难以被广泛应用。

所以，对于 React Native 来说，如果需要的功能不仅仅是一个入门应用程序，那么你需要使用第三方库来扩展 React 库，使其更接近真正的框架。

我的应用只有几个页面，需要与后端 API 进行一些交互。虽然很简单，但需要 MVC 模式中的所有三个字母。和 React Web 一样，React Native 也只有一个常用的路由选项，当然，Redux 也可以在这里使用。经验丰富的 React 开发者会发现 Web 版和移动版之间并没有显著差异——相同的组件/控件，相同的状态驱动，相同的库，这使得 React 前端开发者几乎可以无缝地进入移动开发领域。我拥有丰富的 React Web 开发经验，所以过渡到 React Native 的过程非常顺利。当然，如果你之前从未接触过 React，即使是开发一个简单的应用，你也应该花些时间学习一些教程。不过幸运的是，React 对新手非常友好，我认为你可以在一两天内掌握基本概念，并开始自由地进行开发。

React Native 为新手开发者提供了非常优秀的文档，其中包含一份出色的“入门指南”。安装方面，你有两种选择。第一种是比较直接的模式，你需要分别安装 Android 和 iOS 模拟器以及相应的工具链，这样就可以直接在你的机器上进行开发。第二种选择是 Expo——一个封装了 appetiser.io 服务的库。这意味着什么呢？这意味着你无需安装数 GB 的移动操作系统镜像、编译器和原生库。Expo 会直接从 appetiser.io 服务器流式传输你的应用程序。听起来有点奇怪，但它确实有效，而且我发现这是一种非常便捷的方式，即使在像旧笔记本电脑或 Raspberry Pi 这样的低端硬件上也能快速启动开发。但需要注意的是，appetiser.io 的免费套餐每月只有 100 分钟的使用时间，这可能不够用，而付费套餐的起价为 50 美元以上。不过无论如何，这都是一个很棒的想法。

我选择了更常见的方法，先完整地安装了 Android 和 iOS 环境。之后，我按照指南，通过几条“yarn add”命令配置了 React Native。安装过程非常简单，我根据现有的指南创建了一个新项目，并尝试启动它来检查我的 Android 环境是否正常工作。

第一个问题就出在这里。React 尝试用错误的 Gradel 版本编译我的应用，结果编译失败，并抛出了一个很长的堆栈跟踪错误。快速搜索一番后，我找到了解决方案并修复了安装。但让我感到奇怪的是，一个全新的 React 安装竟然从一开始就失败了。

之后，我打开了 API 文档并添加了应用导航栏。模拟器的屏幕变成了红色，显示着无法辨认的内容，于是我又回到 Google 搜索，找到了最近 GitHub 上一个关于这个问题的帖子，里面有很多相关的评论。人们都在指责开发者，说他们每次发布新版本都做得一团糟，这一点我完全同意。导航栏是每个应用的核心部分，几乎随处可见，但 React Native 却做不到。

所以，最后我找到了一个比较稳定的实现方式，并尝试回滚，结果成功了。

让我们抛开核心开发中的种种麻烦，直接进入 React Native 的开发环节。正如我之前提到的，React 只是一个视图库，你需要搭建自己的元框架才能实现高效快速的开发。首先，我选择了 react-native-paper。这个库适用于所有现代 UI 框架，并且开箱即用地提供了原生的 Google Material Design 组件。
之前简单的对话框也出现了问题，但在 react-paper 中却解决了。这对我来说已经足够了。尤其是在我向 react-paper 社区反馈了这个 bug 之后，有人竟然没有任何解释就直接关闭了它。这时我才明白问题出在哪里，但我毕竟还要继续开发我的移动应用，于是开始寻找新的工具。

扑

首先吸引我眼球的是 Google Flutter。React 的种种问题让我非常沮丧，因为我真的很喜欢 React 的工作方式、JSX 以及它简洁而富有表现力的特性。

Flutter并没有给我提供我之前从未尝试过的全新Dart语言，坦白说，我一开始并不想要。但我的内部截止日期已经开始催促我，所以我给了Flutter一个机会。正如你稍后会看到的，这真是一个绝妙的主意。

安装过程非常顺利，因为我已经安装了 Android 环境，所以我只需要下载 Flutter 发行版就行了。从文档中我了解到，使用 Android Studio 配合 Dart 和 Flutter 插件非常方便，而这些插件我也只需点击几下就安装好了。

一开始，我快速浏览了一下 Dart 语言的入门介绍，这确实值得一提。我当时觉得 Dart 是一种很奇特的语言，但别忘了我当时是被迫使用它的。经过一天的密集学习，我发现它彻底改变了 JavaScript。你可以想象 Dart 吸收了 Java、JavaScript 和 C++ 的所有优秀理念，并融合了一些 Python 的特色。乍一看，它似乎是一个丑陋的怪物，但事实并非如此。它是一个非常成熟且设计精良的工具。如果你尝试过其他类似 Google Go 的语言，你应该能理解我的感受。没错，Dart 是一款扎实而强大的语言，它巧妙地融合了动态和静态语言的最佳实践。真的，一两天后你就能感受到它的优势。Dart 非常易于上手，而且使用起来也很方便。我真不明白为什么我之前没有遇到它。

但我们还是回到 Flutter 本身吧。在掌握了 Dart 的基础知识后，我重新开始开发我的移动应用，一切都迎刃而解了。如果我们把它和 React 的概念进行类比，你会发现它们的核心思想大体相同。Flutter 中也有类似 React 中称为 Widget 的最小构建结构，而 React 中则称之为 Component，它可以是有状态的，也可以是无状态的。是不是很熟悉？所以，当你把这些小的构建模块组合成一个大型应用时，所有其他流程都遵循同样的原则，这就是 Flutter 的工作原理。

除了功能齐全的框架之外，你还能立即获得大量开箱即用的组件/控件，例如 Material Design、Apple Cupertino 设计等等。别忘了，Flutter 是一个完整的框架，你只需要 Flutter 就够了。实际上，它包含了构建、调试、测试和发布生产环境应用所需的所有工具，就是这么简单！

结论

React 是一个优秀的库，你可以把它作为框架的基础，它拥有丰富的生态系统和像 Expo 这样令人兴奋的功能。但它一直处于 beta 测试阶段，所以不能完全依赖它。

Flutter 提供了一个基于 Dart 的强大且功能齐全的解决方案。乍一看，Dart 可能是一种有点奇怪的语言，但相信我，它并非如此。Dart 是一个可靠的平台，拥有光明的前景，尤其是在我们知道 Dart 将成为谷歌下一代操作系统 Fuchsia 的主要语言之后。你投入时间学习 Dart 必将获得回报。

总之，那是你的选择，但我已经做出了选择，我选择 Flutter。