React Native是一个开源框架, 由 Facebook 支持, 它发布在 GitHub 上, 涵盖了将 iOS 和 Android 平台的原生 api 结合在一起的方式。然而, Google 的 Flutter 是一个全面的举动, 它允许你同时创建 Android 和 iOS 相应迅速的原生应用。

在这个相互竞争的世界中, 移动应用开发公司的最终目标是选择一个跨平台框架, 使开发人员能够编写一个代码库并跨多个平台进行部署, 共享尽可能多的代码,、时间和成本。这样的话, 我们就可以帮助我们的客户选择一个合适的框架, 最好地支持他们，实现他们的目标。

Flutter 是由 Google 构建的移动应用 SDK (软件开发工具包), 它允许我们创建高性能、高保真度和极快的应用程序, 这些应用程序可以在 Android 和 iOS 等多个平台上运行。现在, 是什么使 Flutter 强大, 因为它有一小部分的 C/C++ 代码, 但它的大部分系统是在 Dart (Dart 是一种通用编程语言最初由 Google 开发) 实现, 开发人员可以很容易地阅读,、替换、 或删除。这给了开发人员对系统的巨大控制。

跨平台解决方案中的工具：

• React Native

• Flutter

• Xamarin

• Progressive Web Apps (PWA)

• Kotlin Native

• J2ObjC/Doppl (Android-centric cross-platform)

• Ionic2

• Cordova/PhoneGap/Titanium

• Unity

在这份名单中, 我们选择了2018年最受欢迎的两个解决方案, 即 React Native 和 Flutter。

Flutter Vs React Native 是最适合移动应用开发

近年来, React Native 表现出了很高的人气, 大多来自 ReactJS 和网络社区。用 JavaScript 编写的方式提高了它的普及率, 许多公司都在转向它。而 Flutter 自 2017年 I/O 以来一直受到 Google 的大力推广, 并引起了开发者们的极大兴趣, 它在移动应用开发行业中的新的竞争力并具有长期的潜力。

以下是 Flutter 与 React Native 之间的快速对比

语言栈

Flutter 是一个开源的移动应用程序框架, 它使用一种完全不同的编程语言, 称为 Dart, 而 React Native 允许只使用 JavaScript 构建移动应用程序。

React Native (JavaScript)

React Native 允许仅使用 JavaScript 构建移动应用. 它在运行时将其动态 JavaScript 代码编译为原生视图。其余代码在应用程序打包里的虚拟机中运行。

Flutter (Dart)

Dart 是 Google 在2011年开发的通用编程语言。Google 和其他公司的开发人员使用  Dart 为 iOS、Android 和 Web 创建高质量的关键任务应用。Dart 具有面向客户端开发的功能, 非常适合移动和 Web 应用。

Dart 基于 C/C++、Java, 支持抽象、封装、继承和多态等特性。Flutter 团队之所以选择 Dart, 是因为它与构建用户界面的方式相匹配, 使用 Dart 桥接, 应用程序的大小更大, 但效果要快得多。与使用 JavaScript 做桥接的 React Native 不同。

架构

React Native

React Native 的应用程序体系结构称为 Flux。Facebook 使用 Flux 构建客户端 Web 应用程序。每个框架大多遵循 MVC 框架。单向数据流是 Flux 的主要概念。在这里, React Native 处理视图部分和 Flux, 一种处理 MVC 中的模型的编程模式。

Flutter

Dart 应用程序架构库, 具有单向数据流, 灵感来自 RefluxJS 和 Facebook 的 Flux。Flutter-Flux 实现了由 Actions、Stores 和 StoreWatchers 组成的单向数据流模式。它是基于 w_flux, 但修改为使用 Flutter 而不是 React Native。

Flutter Flux 实现了一种单向数据流模式, 该模式由 Actions、Stores 和 StoreWatchers 组成。

Flutter 和 React Native 性能

React Native

React Native / NativeScript, 你需要一个桥梁来调用 Swift 或 Android 或 Windows & Mac APIs。 Flutter使用的是 Dart, 所以你不需要那样，一切都是原生的。 这也解决了 JS 生态系统之间的许多不同版本之间的问题，比如CommonJS, AMD。React Native 开发人员, 在开发混合应用时面临问题, 但对于原生应用, 不会面临任何与性能相关的问题。它在所有标准情况下都提供无缝性能, 并且高度可靠。

Flutter

根据他们的应用性能, 将 Facebook 的 React Native 与 Google 的 Flutter 进行比较, 是 Flutter 战胜了竞争对手。Flutter 具有 Dart 的优势, 并且没有 JavaScript 桥接用于处理与设备本机原生组件的交互, 开发速度和运行时间会大大加快。

Flutter 已将动画标准设置为 60fps, 这清楚地表明了其高性能。最后, 由于 Flutter 被编译成 Android 和 iOS 的原生 ARM 代码, 性能是它永远不会面临的一个问题。

用户界面 (UI/UX)

React Native

与 Flutter 的应用不同, React Native 的应用开发 要求使用第三方库, 因为  React Native 没有自己的 UI 组件库。我们使用的组件, 如 NativeBase, 这是一个开源 UI 组件库创建的极客。React Native Elements、React Native Material Design 和 Shoutem 是可供用户使用的其他类似 UI 库。

在比较 React Native 与 Flutter 之间的用户界面时, React Native 类似于在没有任何 CSS 框架的情况下使用 HTML。它更多的是基于 Android 和 iOS 的原生组件, 当用户点击操作系统时, 还可以获得更好的用户体验 (UX)。

与 Flutter 的平面应用程序不同, React Native 没有自己的 UI 组件库, 它使用第三方库和组件，如 NativeBase。NativeBase 是一个开源库, 它在 React Native 之上构建了一个图层, 为您提供了一组基本的 UI 组件。

目前, 有3个主要的 UI 库:

• Shoutem UI Components

• React Native Elements

• Native Base components

Flutter

布局组件目前是应用程序的一部分, 可以包括新的组件, 并且可以修改现有的组件, 使它们具有全新的感觉和外观, 趋势现在已经改变, UI 已变得更加用户友好, 易于使用, 增加用户参与, 以及赢得认同。

Flutter 伴随着内置的漂亮的 Material Design 和 Cupertino 像 iOS 的风格的组件, 丰富的行为 API, 流畅的自然滚动, 和平台意识。Flutter 有自己的 UI 组件、Material Design、适应性强的组件集以及渲染它们的引擎同时支持 Android 以及 iOS 平台。

下面是 Flutter 组件的几个示例:

• Drawer

• Inkwell

• GestureDetector

• DefaultTabController

社区支持

React Native

React Native 在2015年作为开源发布在 GitHub 上, 是 Stack Overflow 上最流行的框架。它是由一个巨大的社区支持，在 GitHub 上有68K 星, 14.5 k 用户细分, ~ 9000 用户不和谐聊天和在  Stack Overflow 上强大的支持, 这就是为什么与 Flutter 相比它有更多的第三方类库/插件。

Flutter

Flutter 团队可以在 GitHub 上的一个 ~ 4.5 k 用户细分 dit, ~ 30k 星 ，Google 和 Stack Overflow 约740用户的支持。尽管在 Stack Overflow 开发者调查中 Dart 并没有得到太多的喜爱, 但早期的博客文章对 Flutter 的使用持肯定态度。

Flutter 的社区并不像 React Native 那样强大。但 Google 的 Flutter 团队提供的支持确实不错。他们的文档足够透彻, 可以帮助你, 并在合理的时间范围内解决发布的问题, 这些问题有助于开始使用 Flutter 进行应用程序开发。

Unit Testing

React Native

开发人员拥有所有 JavaScript 框架可用于在单元级别进行测试。然而, 在 UI 和自动化测试方面, 情况并不那么理想。虽然有许多第三方库可用, 但那里并没有清晰的概念。

Flutter

Flutter 是一个新的框架, 当涉及到测试一个新的框架, 它在某种程度上是困难的, 但 Flutter 使用 Dart 提供了一个优秀的单元测试框架, 可以利用和 Flutter 为您提供了一个很棒的选择, 以单元测试的速度在运行时测试组件。

开发时间

现在, Web App 开发公司的工作期限非常严格, 如果框架提供了较短的开发时间, 那么公司就有很大的可能选择该框架。

React Native 有许多不同的第三方库, 如日历、轮播图片和 对话框, 它还具有现成的组件, 从而提高了跨平台应用开发的速度。在 Flutter, 我们需要为 iOS 和 Android 平台添加单独的文件。在这些文件中的每个文件中, 我们都需要添加与平台规则相对应的代码。虽然  Flutter 也承诺高速应用开发。

热加载

与真正的原生应用在 Android Studio 和 xcode 中重新编译相比, Flutter 和 React Native 都支持有状态的热重新加载, 速度非常快。如果你的应用遇到错误, 你通常可以修复该错误, 然后继续, 就好像错误从未发生过一样。

你可以在 Flutter 应用运行时对其进行更改, 它将重新加载已更改的应用代码, 并让它从您中断的位置继续。

配置与设置

与 React Native 相比, Flutter 的设置过程要简单得多。Flutter 伴随着系统问题的自动检查, 这在很大程度上是 React Native 的缺失。

开发稳定性：React Native 对比 Flutter

在开发跨平台应用时, 稳定性成为一个重要因素。由于 Flutter 在跨平台行业中是非常新的, 因此采用 SDK 开发跨平台应用的企业数量却少得多。但是,  Flutter beta 3, 它提供了改进的开发人员工具和资源系统。

另一方面, 使用 React Native 框架开发的应用案例数量要高得多。它与以前相比相当稳定, 也得到了大量贡献者社区的支持。

Flutter 对比 React Native 的结论

React Native 和 Flutter 都有自己的利弊. Flutter 在应用开发行业市场上仍然是新的, React Native 在之前就已经开始了, 以获得良好的受众优势。

我想很多人没有意识到 Flutter + Dart 尚未开发的潜力。对于 Flutter 来说, 有一些工作要做, 离能够与之竞争还有5年的时间, 但最终, 它将到达那里, 这意味着100% 的跨平台应用程序与100% 的代码共享。

原文链接：https://www.angularminds.com/blog/article/comparison-between-flutter-vs-react-native-for-mobile-app-development.html