ReactNative&Flutter

1. Flutter & React Native #

Flutter 和 React Native 是跨平台应用程序开发的两个领先工具。了解它们的差异以及各自的最佳用例。

什么是Flutter？ #

Flutter 是 Google 于 2018 年发布的用户界面 (UI) 软件开发套件。Flutter 可让您为多种平台和操作系统构建跨平台应用程序。

什么是 React Native？ #

React Native 是 Facebook 创建并于 2015 年发布的移动开发框架。您可以使用 React Native 开发移动、Web 和桌面应用程序。

2. React Native 和 Flutter 最大的区别 #

Flutter 在自己的画布上渲染所有组件。

React Native 将 JavaScript 组件转换为原生组件。

因此，组件更新（例如，iOS 16）对 Flutter 应用程序没有任何影响，但对 React Native 应用程序有影响。

根据不同的立场，这可能是一件好事或坏事。例如，如果你希望你的组件保持原样，Flutter的方法将满足你的需求。但是如果你希望你的应用程序能够跟上最新的本地组件设计，那么React Native就是最好的选择——在React Native中，这种更新会自动进行且免费。此外，如果你不想让React Native应用程序中的组件遵循新的iOS设计（因为你想保留风格），你可以关闭自动组件更新。

但是要在Flutter中包含最新的本地组件，你必须手动更新应用程序。

Flutter 会超越 React Native 吗 #

截至 2024 年 4 月，Flutter 在流行度和使用率方面越来越接近于超越 React Native。但是让我们看看统计数据。

在2024 年 Stack Overflow 调查的 “最受欢迎技术 - 其他框架”类别中，Flutter 比 React Native 高0.69%。

谷歌趋势。 #

在超过 React Native 两年多之后，2024 年 4 月，Flutter 成为全球搜索频率更高的查询。

Flutter 与 React Native：比较 #

学习曲线 #

似乎React Native相对于Flutter的优势在于它使用JavaScript——全球最流行的编程语言。

然而，JavaScript并不一定是最简单和最有趣的编程语言。就像木匠喜欢高质量的工具一样，开发人员也喜欢使用有趣和方便的编程语言——这样可以使工作更加愉快和有效。

那么，Flutter和React Native哪一个更容易学习？

从开发人员的角度来看，Flutter比React Native更容易学习。

正如我们之前提到的，JavaScript远非最友好的编程语言。它包含各种嵌套的类和其他怪癖，有时让开发人员难以理解JavaScript的运作方式，从而不必要地复杂化编码。

还有React Native作为一个框架本身。这并不是说React Native是一个糟糕的框架——事实上，许多优秀的应用程序都有它。。但是如果不熟悉一些细节，你可能会花费长时间来解决在配置开发环境时遇到的问题。

相比React Native，Flutter更加友好。Dart作为一种编程语言比JavaScript更易于使用和理解。Dart在范式和用法上也更接近于用于本地移动应用开发的编程语言。

命令行界面 (CLI) #

Flutter 还有一个命令行界面 (CLI)，它附带了 Flutter Doctor 等工具，它可以帮助设置您选择的 IDE 和 iOS 或 Android 开发。Flutter Doctor 查找安装在本地机器上的工具并检查它们的配置。Flutter CLI 与 Flutter Doctor 相结合，可以更顺畅地为新的 Flutter 移动应用程序准备环境。

Flutter 与 React Native 性能比较 #

React Native 的架构需要一个桥接器来实现 JavaScript 与本地用户界面组件和设备特定元素（蓝牙、传感器、相机等）之间的交互。由于基于桥接的通信，React Native 比 Flutter 慢一点。

先说理论性能，在理论上 Flutter 的设计性能是强于 React Native ，这是框架设计的理念导致的，Flutter 在少了 OEM Widget ，直接与 CPU / GPU 交互的特性，决定了它先天性能的优势。

这里注意不要用模拟器测试性能，特别是IOS模拟器做性能测试，因为 Flutter 在 IOS模拟器中纯 CPU ，而实际设备会是 GPU 硬件加速，同时只在 Release 下对比性能。

代码的实现方式不同，也可能会导致性能的损失，比如 Flutter 中 skia 在绘制时，saveLayer 是比较消耗性能的，比如 透明合成、clipRRect 等等，都会可能需要 saveLayer 的调用， 而 saveLayer 会清空GPU绘制的缓存，导致性能上的损耗，从而导致开发过程中如果掉帧严重。

发展 #

技术的成熟度通常反映在广泛和积极的采用以及长期支持上。React Native 拥有大量高质量的第三方库，并已被纳入各大品牌的技术堆栈。

不过，Flutter 正在快速追赶，我们可以说这两种技术都已经足够成熟，可以安全地用于生产。

跨平台能力 #

React Native 允许开发人员通过 React 为 iOS 和 Android 以及 Web 构建应用程序。最近，Microsoft 推出了一个很棒的项目，其中可以使用 React Native（适用于 macOS 和 Windows）编写桌面应用程序。

对于 React Native 0.71 版（最初遇到了一些麻烦），团队专注于改善默认情况下使用 TypeScript 的跨平台开发人员体验、新架构更新以及通过 Flexbox Gap 进行布局管理。此版本还提供了受网络启发的样式和可访问性道具，以跨平台调整 RN 的 API。

使用 Flutter，您可以为 Web、macOS、Windows、Linux、Android、iOS 和嵌入式系统（例如，汽车中的信息娱乐系统）开发应用程序。

Flutter 3 承诺提供真正的跨平台开发功能，SDK 允许开发人员在所有兼容平台之间共享代码。事实上，Flutter 4 将专注于桌面应用程序开发。另一方面，Flutter 的最新版本 Flutter 3.7 通过 iOS 上的新渲染引擎和后台处理改进以及对开发人员工具和国际化以及 Material 3 支持的其他更新来提升性能。

编程语言 #

Dart 编程语言与 Java/Kotlin (Android) 非常相似，这使得来自原生移动开发的开发人员更容易学习。JavaScript 不太直观，因此更难掌握。

使用Flutter和React Native相对于原生开发的优势： #

1. 非常快速地创建应用程序原型，不需要最新的原生功能。而原生开发要花费更长时间。
2. 热重载包含在React Native和Flutter中，可以让开发人员快速得到有关布局更改的反馈。每当您更改某些内容时，可以在无需重新编译应用程序的情况下检查其在应用程序中的外观。这大大加快了开发过程。

注：热重载也受到原生Android和iOS的支持，但是与React Native和Flutter相比，其功能受到限制。

使用 React Native 或 Flutter 与原生应用程序开发的缺点 #

尽管React Native和Flutter都是快速构建移动应用的优秀工具，但调整跨平台应用程序以适应操作系统更新时会有一定的开销（无论是iOS还是Android），而本地应用程序则会自动更新。

使用本地应用程序开发，实现出色的应用程序性能更加容易。尽管在Flutter或React Native中构建的iOS和Android应用程序的性能差异越来越不明显。

此外，在本地应用程序中实现完美的像素级设计更加简单。然而，这要求您分别为两个平台进行实现，从而增加了开发时间和成本。

另一方面，Flutter的组件（例如按钮或文本框）高度可配置，使您可以微调设计并实现完美的像素级别。

一些新功能在本地iOS和Android上可用，更容易在本地应用程序中实现。

结论：React Native 比 Flutter 好吗？ #

这个问题的参数已经在一段时间内发生了转变。在熟练的开发者手中，React Native和Flutter都可以用来构建具有接近本地性能和外观的优秀应用程序。然而，Flutter在商业和专业开发者中的使用越来越多，这一趋势在全球范围内持续发展。

但是，选择任何一种技术时，你必须从更广泛的角度来看待它，而不仅仅是流行度或技术优缺点。

例如，在外包开发之后，你能否招到完整的Flutter开发团队来维护和发展你的应用程序？

Flutter的温和学习曲线是一项宝贵的资产，当你需要开发者快速跳入项目时，Flutter的文档配合相对较容易的Dart肯定会有所帮助。

但与React Native中极受欢迎的JavaScript相比，Dart不是非常流行的编程语言。因此，难以招募到熟练的Flutter开发人员。

经常问的问题 #

Flutter 比 React Native 快吗？ #

随着 React Native 架构（JSI）的变化，React Native 在性能上已经越来越接近 Flutter。但是 Flutter 应用程序仍然可以比 React Native 的应用程序稍微快一些（当然，这不一定是个问题，这取决于您的产品类型和它所做的工作）。

Flutter 比 React Native 好吗？ #

一段时间以来，Flutter 一直在逐渐赢得 React Native 与 Flutter 流行度竞赛，这是因为它被认为更易于使用。此外，GitHub 上报告的问题比 React Native 的解决方案多得多。然而，市场上的 Flutter 开发人员稀缺，这是一个相当大的缺点。因此，尽管 Flutter 相对于 React Native 有很多优势，但很难回答哪种技术更适合开发接近原生的移动应用程序。