Flutter vs React Native：移动应用开发选择什么？

已发表: 2018-05-18

Facebook 的 React Native 和 Google 的 Flutter 最近引起了巨大的轰动，同时在竞争中相互竞争以决定哪个框架是最好的。 在本文中，我们将研究它们如何在行业中相互竞争。

什么是颤振？
什么是 React Native？
Flutter 和 React Native 的区别：详图。
用于 React Native 的 Flutter
Flutter 有什么新功能？
React Native 有什么新功能？
关于 Flutter 与 React Native 辩论的常见问题。

曾经有一段时间，移动应用程序开发行业仅限于为 iOS 和 Android 单独开发应用程序，但现在情况已经发生了 100% 的转变。

今天，投资一家移动应用程序开发公司，该公司擅长在一个代码库上开发可在 Android 和 iPhone 上运行的单一应用程序，已成为时尚的商业议程。

当 Facebook 在 2015 年推出并普及其跨平台应用程序开发框架 React Native 时，每一个跨平台应用程序开发指南都表明“趋势”已成为主流。

从那时起，企业——为了利用React Native 应用程序开发必须提供的成本和开发优势——在获得了对“ React Native 是适合你的下一个平台”这个问题的关注利润的答案后，一直在转向该框架应用程序？ '。从而进一步加强了React Native 与 Native的争论。

因此，毫无疑问，React Native 变得流行起来，LinkedIn、Instagram、Walmart 等热门照片都转移到了这个平台上。

2018 年 3 月的人气受到了影响，相当有影响力。

谷歌在世界移动通信大会上宣布了自己的跨平台 SDK 的 beta 版本，称为 Flutter。而且，在短短几个月内，使用 Flutter 的移动应用程序开发已经开始推动 React Native 的风头，这得益于 Google 以支持 AndroidX等功能的形式赋予它的力量、游戏控制器等。

现在回到今天。

目前的情况是，Flutter 和 React Native 已经进入了一场公开的牵引力和大规模采用战争，并且任何一个框架的搜索查询都返回了结果显示 - “ React Native vs Flutter 2019 ”。

让我们回顾一下这两个框架所代表的意义，以便为比较成为为 iOS 和 Android 构建应用程序的最佳原生解决方案奠定基础。

什么是颤振？

Flutter Engine 是当今业界领先的开源跨平台应用程序开发框架之一。它由谷歌于 2017 年开发。

现在让我们研究一下 Flutter 的优缺点，以便对框架有一个更清晰的认识。

构建跨平台应用程序具有以下优势：

完整的开发生态系统
高度可定制
谷歌让它非常可靠
热重载功能
开源且免费使用

它也有一些缺点，例如：

应用规模大
依赖原生工具和技术来构建应用程序

借助该框架制作的应用程序包括——阿里巴巴、Hookle、Topline、OfflinePal、Hamilton 等。

什么是 React Native？

它是 Facebook 于 2015 年开发的开源框架，作为自己的跨平台应用程序开发技术。除了构建移动应用程序所需的本机平台功能外，它还允许开发人员使用 React 和 JavaScript。

它具有一系列好处，例如：

原生 UI 组件的实现
现成的组件
允许访问本机功能
热重载
高度可靠
平台特定代码
开源
用于 Web 功能的 React Native

但是跨平台的移动应用开发框架也有一些缺点，包括：

非无缝导航
复杂的用户界面

使用 React Native 制作的应用包括：Facebook、Skype、Artsy、Vogue、Bloomberg 和 Tesla 等。

解剖已经完成到这样一个程度，我们能够绘制一个比较信息图来了解它的最佳跨平台应用程序开发。

Flutter 和 React Native的区别：详图

框架成熟度

React Native 于 2015 年首次发布，而 Flutter 的第一个 Beta 版本是在 2 月 26 日至 3 月 1 日举行的移动世界大会上发布的。所以，说到成熟度，Flutter 不如 React Native 成熟。由于仍处于起步阶段， Flutter 应用程序开发还需要一段时间才能成熟。

反应原生- 1

颤振- 0

编程语言

React Native 使用 JavaScript 构建跨平台应用程序。除了其他著名的 JavaScript 框架外，它主要与 React 一起使用。这使得 Web 开发人员可以非常轻松地开始他们的移动应用程序之旅。

另一方面，Flutter 使用 Dart 编程语言。该语言于 2011 年由 Google 推出。它使用了许多面向对象的概念，这些概念相当容易学习和入门。

但是，看看 JavaScript 是如何成为开发人员开始他们旅程的语言的，React Native 很容易这一事实让它得到了更多的分数。

反应原生- 1

颤振- 0

安装

React Native 框架是通过 Node Package Manager (NPM) 安装的。对于具有 JavaScript 知识的开发人员来说，安装过程非常简单。

Flutter 是通过从 Github 下载特定平台的二进制文件来安装的。对于 macOS，必须下载一个额外的 flutter.zip 文件并将其添加为 PATH 变量。

虽然 Flutter 框架和 React Native 都缺乏针对操作系统的原生包管理器的单线安装，但 Flutter 安装需要一个额外的步骤。因此，重点在于 React Native。

反应原生- 1

颤振- 0

配置和设置

与 React Native 相比，Flutter 的设置过程要简单得多。 Flutter 提供了对系统问题的自动检查功能，而 React Native 在很大程度上忽略了这一点。

颤振- 1

反应本机- 0

技术架构

React Native 架构依赖于 JS 运行时环境架构，称为 JavaScript 桥。它使用 Facebook 的 Flux 架构。另一方面，Flutter 使用 Dart 框架，它不一定需要与本地模块通信的桥梁。

由于 Flutter 引擎在框架本身中自带了很多原生组件，并且不需要与原生组件通信的桥梁，所以这里的重点是 Flutter。

颤振- 0

反应原生- 1

用户界面

在用于 UI 开发的构建块方面，Flutter 应用程序开发服务和它们的 React Native 对应物都有明显的不同。一方面，React Native 在第三方或自定义组件的帮助下利用原生 Android 和 iOS 组件，而 Flutter 使用 100% 定制的专有小部件运行。

这些小部件在 Google 的 Material Design 和 Apple 的 Cupertino 中都有，这使得 UI 成为Flutter 是否取代 React Native的可能因素之一。

反应本机- 0

颤振- 1

原生外观

原生外观和感觉是用于移动应用程序开发的 Flutter 和 React Native 作为他们的 USP 推广的东西。虽然作为 React Native Development 标志的性能可供全世界窥探和探索，但对于 Flutter 来说，同样不能保证。

公司聘请 Flutter 开发人员的原因是其无需任何第三方组件即可使用设备的核心功能的特性，在开发适用于 iOS 和 Android 的原生外观和感觉应用程序的旅程中走得更远。

反应原生- 1

颤振- 1

工装

在工具方面，Flutter 无法与 React Native 相提并论。由于 Flutter 至少有 3 年的历史，支持它的 IDE 和工具的数量要多得多。

但是，Flutter 框架绝对可以夸耀它与 Visual Studio Code、IntelliJ idea 和 Android Studio 的兼容性。此外，Flutter 的调试器、Dart linter、自动格式化、代码分析器和自动格式化工具也获得了一些非常好的评价。

反应原生- 1

颤振- 0

开发人员的生产力

对于拥有 JavaScript 专业知识的开发人员来说，React Native 非常简单。它带有热重载功能，可以在很大程度上节省开发人员的时间。此外，开发人员甚至可以自由使用他们选择的任何 IDE 或文本编辑器。

Flutter 还带有热重载功能。但是，当开发人员必须学习和使用新的 Flutter 概念时，学习曲线会稍微大一些。此外，作为新手的 Dart 缺乏对许多文本编辑器和 IDE 的支持，这降低了开发人员的工作效率。

React Native 更加成熟，在语言特性和 IDE 方面为Flutter 应用开发公司提供了更多的开发者支持。为此，得分归于 React Native。

反应原生- 1

颤振- 0

文档

虽然 React Native 文档处于混乱状态，但这是一个高度开源的框架，但它有很多东西要从 Flutter 文档中学习。

谷歌以其清晰、详细和格式良好的文档而闻名，并且通过 Flutter，他们延续了人们的期望。

当您查看2019 年 Flutter 与 React Native的当前比较时，您会发现 Flutter 落后了，而且确实是。但情况将会改变。

Flutter 在很短的时间内就开始受到商家的广泛关注，实际上当你查看他们的 Showcase 页面时，你会发现使用 Flutter 制作的应用属于复杂类别，正在使用多人同时进行。

再加上他们不断添加到其产品组合中的库，以及现场文档，您将获得一个准备好迎接跨平台世界的框架。

事实上，谷歌本身并没有回避正面挑战 Facebook。

如果你错过了 Flutter 的 React Native 深度文档，这里有一个总结版本。

用于 React Native 的 Flutter

Flutter for React Native 是 Google 的文档，可帮助开发人员将当前的 React Native 知识应用于开发 Flutter 应用程序。

该文档详细介绍了创建新的 Flutter App 的过程。这个链接特别解释了 react native 的颤振，该页面旨在表明任何已经在 react native 上工作的开发人员都可以轻松地打开 Flutter。

该文档明确邀请iOS 和 Android 应用程序开发人员脱离 React Native 并体验 Flutter 的易用性和灵活性。

从表面上看，指导开发人员从 React Native 切换到 Flutter 的文档并不是谷歌试图在大规模采用竞赛中超越 React Native 的唯一方式。在跨平台 SDK 生态系统中添加 Material Theming 和 Cupertino 小部件的举措为使用 Flutter SDK 开发的应用程序添加了全新的富有表现力的用户界面，这是 React Native 仍然缺乏并依赖于其他设计工具包的东西。

颤振- 1

反应本机- 0

应用性能

谈到Flutter 与 React Native 的性能比较，Flutter 夺冠。它比它的 React Native Development 对应物快得多。由于没有用于启动与设备原生组件交互的 JavaScript 桥接器，因此开发速度和运行时间会大大加快。

再加上 Flutter 将动画标准设置为 60fps，这是其高性能的明显标志。最后，由于 Flutter 被编译为 Android 和 iOS 的原生 ARM 代码，性能是它永远不会面临的一个问题。

反应本机- 0

颤振- 1

生命周期管理

一般来说，React Native 在简化应用程序生命周期处理和优化方面往往做得更好。 Flutter 只为您提供了使用小部件继承的范围，它只允许无状态和有状态条件，减去任何用于显式保存应用程序状态的工具。

反应原生- 1

颤振- 0

代码重用

React Native 使您能够编写一次代码并将其发布到任何地方，同时接受平台差异。这意味着，有时开发人员可能不得不查看他们在哪个平台上运行并在平台的基础上加载不同的组件集。

Flutter 的代码库可重用性更高。它允许定义单个 UI 小部件树，然后重用定义的逻辑，这样就不必做太多的区分。

对于 Flutter 提供的易用性，重点在于框架。

反应本机- 0

颤振- 1

构建和发布自动化帮助

Flutter 相对于 React Native 的一个显而易见的好处是它在构建和发布方面的自动化帮助。 React Native 官方文档没有提供任何在 App Store 上部署 iOS 应用程序的自动化方式。它确实提供了从 Xcode 部署应用程序的手动过程。此外，React Native 依赖第三方库来构建和发布自动化。

Flutter 的核心功能带有强大的命令行界面。它允许开发人员在命令行工具的帮助下开发应用程序二进制文件。

Flutter 带有一个惊人的自动化工具并用于从命令行部署应用程序这一事实使其在竞争中领先于 React Native。

颤振- 1

反应本机- 0

测试支持

在JavaScript 框架上，只有少数单元级测试框架可用于 React Native。同样，当您必须集成时，React native 也没有官方支持。有一些第三方外观，如 Detox 和 Appium 可用于测试应用程序，但官方不支持它们。

Flutter 提供了广泛的测试功能，用于在单元、集成和小部件级别测试应用程序。它甚至带有很棒的文档。

测试支持的程度清楚地突出了 Flutter 相对于 React Native 的优势。

反应本机- 0

颤振- 1

CI/CD 和 DevOps 支持

React Native 在CI 和 CD上没有任何官方文档。另一方面，Flutter 有一个完整的部分，其中包括几个链接，使为 Flutter 应用程序添加 CI/CD 成为一个非常简单的过程。

颤振- 1

反应本机- 0

社区支持

React Native 于 2015 年推出，随着时间的推移已经广受欢迎。它得到了一个庞大的社区的支持，该社区在全球范围内举办了多次会议。 Flutter 虽然得到了开发者社区的大量关注，但仍然有时间达到大规模的社区备份，例如React Native 应用程序开发公司。

由于 Flutter 社区中可供开发人员使用的资源仍然相当少，这清楚地证明了 React Native 相对于 Flutter 的优势。

反应原生- 1

颤振- 0

人气

在 React Native 和 Flutter 之间，React Native 开发人员的数量甚至在其上运行的应用程序数量都比 Flutter 多得多。但是，这一差距正在迅速填补。根据Stack Overflow 的 2019 年开发者调查，Flutter 被评为最受喜爱的语言，超过 75.4% 的人对该框架感兴趣，而 62.5% 的开发者对 React Native 感兴趣。

看到这两个框架如何获得牵引力，很难评论谁在这两个方面都更好。

反应原生- 1

颤振- 1

行业采用

由于 Flutter 在跨平台行业中相当新，因此采用 SDK 开发跨平台应用程序的企业数量非常少。而另一方面，使用 react native 进行应用程序开发的好处在于，使用该框架开发的应用程序的展示页面要高得多。

然而，事实仍然是，即使是新品牌，与他们合作的Flutter 应用程序构建公司，也已经在 SDK 上推出了像 Google AdWords 或 Hamilton Musical 这样相当复杂的应用程序，甚至是像阿里巴巴这样的电子商务巨头。

反应原生- 1

颤振- 0

进一步推动Flutter vs React Native 2019大火的是两个顶级跨平台工具引入的新增功能。

从 2018 年到现在，尤其是在2019 年的 Google IO 活动公告之后，这两个领域都带来了许多新的变化，这些变化已经为激烈的竞争铺平了道路。

让我们看看 2019 年 Flutter 和 React Native 有哪些新变化。

Flutter有什么新功能？

自从 Flutter 的第一个 beta 版本以来，该框架在性能能力和采用率方面一直在增长。

Flutter 于2019 年7 月发布了1.7 版本，其中包含大量新功能和改进，包括：-

Android X 支持——这使得Flutter 应用程序开发人员可以在不影响向后兼容性功能的情况下更新他们设计的 Android 应用程序。

OpenType 丰富的排版功能——Flutter 正在发布一组新的排版功能，如表格和旧式数字、斜线零、样式集等，这将增强应用程序的 UI 体验。

此外， Flutter for Web也已推出，重点是让 Flutter 超越智能手机，进入 Chromebook、Windows 和 Mac。它使使用 Flutter 开发桌面应用程序成为现实。这总体上给人的印象是，Flutter 的未来范围更大，应该在 2019 年被 Android 和 iOS 开发者考虑。

2019 年以Flutter 发布 1.12 版本结束。在Flutter Interact 活动中，该版本发布了多项新功能和改进，重点关注环境计算。

除此之外，他们还进行了其他几项改进，例如：

飞镖 2.7
修改后的 DartPad
测试版网络支持
macOS 桌面支持
添加到应用程序更新
新的谷歌字体包
iOS 13 暗模式支持

React Native 有什么新功能？

去年 11 月，React Native 还为 2018 年和 2019 年制定了路线图，这使得在 React Native 中构建移动应用程序的整个事件变得更加令人兴奋。

列表中添加的元素都是为了重新定义 React Native 所代表的东西。

他们计划：

使 API 稳定
创建更好的 GitHub 存储库
更好的文档
React Native 的表面积被未使用和非核心组件移除
计划改进对开源社区中著名的工具和平台的支持。
Facebook 将通过公共 API 使用 React Native 以减少重大更改的实例。

除此之外， React Native 0.60 于2019 年7 月推出，具有自己的一系列新变化，例如：-

新屏幕 - 引入了一个新屏幕，显示相关说明，如编辑 App.js、文档链接、调试菜单的过程等。这被社区认为是为了提高 React Native 的用户友好性和流行度而不是 Flutter 的努力。

支持 Android X - 类似 Flutter，React Native 也将支持 AndroidX（Android 扩展库）。这意味着无论您选择 React Native 还是 Flutter，AndroidX 都将成为您移动应用程序开发过程的一部分。

2019 年 9 月， React Native 推出了 0.61 版本，拥有全新的重载体验，称为快速刷新。

在此版本中，实时重新加载和热重新加载功能已合并为一个称为快速刷新的功能。

以下是定义 React Native 0.61 特性的原则：

它完全支持现代 React
它在拼写错误后恢复，并在必要时回退到完全重新加载。
它不执行任何侵入性代码转换。

除了快速刷新之外，他们还进行了其他重大改进，例如：

修复了 use_frameworks！ CocoaPods 支持
添加了 useWindowDimensions 钩子
React 已升级到 16.9

随着这些变化现在被引入或准备添加到 Flutter 和 React Native 生态系统中，战争只会变得更加激烈。

总而言之，Flutter 需要一段时间才能超越 React Native 随时间积累的流行度。宣布 Flutter 是移动应用程序开发的未来还需要时间，但只要给它时间，它就会在 React Native 的用户群中跳来跳去。

关于 Flutter 与 React Native 辩论的常见问题

Q. 在 Flutter 和 React Native 之间，2020 年该选哪一个？

很难说，因为这两个框架都做得很好。因此，我建议根据本文中共享的比较因素做出决定。

问：flutter 会取代 react native 吗？

是的，Flutter 将取代 React Native，成为未来跨平台开发的统治者。

Q. Flutter 有多受欢迎？

尽管 Flutter 在市场上很新，但在市场上已经赢得了极大的欢迎。 Reinvently、Hamiliton、Topline 和 Google Ads 等各种流行品牌都采用了 UI 框架。

问：React Native 是否仍处于测试阶段？

不它不是。

Q. 为什么 Flutter 比 React Native 更好？

在 Google 的支持下，Flutter 提供了比 React Native 更多的原生体验，并且不太依赖第三方库来引入新功能。这让 Flutter 在 React Native 上占了上风