跨平台应用开发：Flutter 与 React Native 的深度比较
您是 Android 用户还是 iOS 用户？ 您的笔记本电脑是 Windows 系统、macOS 系统还是 Linux 系统？ 在当今的市场中，各种设备使用不同的操作系统，为了覆盖所有潜在客户，选择合适的开发工具至关重要。
一个能够开发跨平台应用的平台可以显著减少开发时间和资源投入。
Flutter 和 React Native 是跨平台开发领域中两个备受瞩目的选择。面对这两者，您可能难以抉择。
为什么选择跨平台解决方案而不是原生方案？
节省时间
构建一个功能完善的应用程序需要大量时间。如果您希望开发一个同时服务于 iOS 和 Android 用户的应用程序，不必为每个平台创建单独的代码库，从而节省大量时间。
降低开发和维护成本
聘请开发人员为不同平台创建独立的应用程序可能非常昂贵，运行这些应用程序的成本也可能很高。而跨平台开发方案允许开发人员使用相同的代码为多个平台编写代码，从而降低成本。
跨平台开发的优势还体现在维护上。您只需更新一个代码库，更改即可在所有平台上生效，大大降低了维护成本。
接近原生的性能
原生应用程序是为特定操作系统量身定制的，以其卓越的性能而闻名。然而，诸如 React Native 和 Flutter 之类的跨平台解决方案所创建的应用程序性能已经非常接近原生应用，普通用户甚至可能难以察觉差异。
本文将深入探讨 Flutter 和 React Native 的特性、差异、相似之处以及性能，帮助您做出更明智的选择。
什么是 Flutter？
Flutter 是谷歌开发的开源 UI 工具包，采用 Dart 编程语言。开发人员可以通过 Flutter 使用相同的代码库为 Android、iOS、桌面和 Web 应用创建用户界面。
以下是使用 Flutter 的一些主要优势：
- 单一代码库支持多平台： 您可以使用相同的代码库发布适用于 Android、iOS、桌面和 Web 平台的应用程序。
- 基于编译型语言： Flutter 使用 Dart 语言。Dart 是一种编译型语言，可以在运行之前将代码转化为机器可读的代码，从而提高 Flutter 应用的运行速度。
- 接近原生的性能： Flutter 使用 Skia 引擎，不依赖于中间代码表示或解释器，这使得 Flutter 应用程序拥有接近原生的性能。
什么是 React Native？
React Native 是由 Meta (原 Facebook) 开发的 JavaScript 框架，用于构建跨平台应用程序。它能够让开发人员创建接近原生体验的 Android 和 iOS 应用。
React Native 受开发人员欢迎的原因包括：
- 代码复用性： React Native 采用基于组件的架构，可以在应用程序中复用代码块，缩短开发时间。
- 丰富的第三方库和框架： React Native 拥有庞大的社区、丰富的库和框架。例如，您可以使用 Redux 等库来管理应用程序的状态。
- 实时热重载： 您可以在开发应用程序时立即查看更改效果。还可以选择仅重新加载特定代码，节省编译时间。
- 原生用户体验： React Native 使用操作系统 (iOS 和 Android) 的底层组件，使应用程序具有原生体验。
Flutter 与 React Native：快速比较
| 特性 | React Native | Flutter |
| 语言 | JavaScript | Dart |
| 创建者 | Meta (原 Facebook) | |
| 开源 | 是 | 是 |
| 社区 | 大而活跃 | 小而不断增长 |
| 应用程序示例 | Wix、Soundcloud Pulse、Facebook 和 Facebook 广告 | 阿里巴巴、eBay、BMW、Crowdsource |
| 第三方库 | 丰富且不断增长 | 相对较少，但正在增长 |
| 状态管理 | 通过 Context API 和各种库 | 通过各种包/库 |
| 热重载 | 是 | 是 |
| 渲染 | React Native 渲染库 | Skia |
Flutter 与 React Native：深度比较
尽管 Flutter 和 React Native 都是用于创建跨平台应用程序的工具，但它们在许多方面存在差异。
#1. 语言
Flutter 和 React Native 使用不同的编程语言。
React Native
React Native 可以与 JavaScript 或 TypeScript 结合使用。2022 年 Stack Overflow 的调查显示，JavaScript 是最受欢迎的编程语言之一， 65.36% 的受访者表示喜欢它。
图片来源：Stack Overflow
TypeScript 是 JavaScript 的超集，在同一调查中排名第四，有 34.83% 的受访者表示喜欢使用它。
Flutter
Flutter 是一个基于 Dart 语言的框架。Dart 是一种面向对象的语言，被 Google 用于维护多种产品，例如 Flutter Engine、Flutter Framework 和 AngularDart。在同一项调查中，只有 6.54% 的受访者倾向于使用 Dart。
图片来源：Stack Overflow
胜者
很难在此项中确定明确的赢家，因为 JavaScript/TypeScript 和 Dart 这两种底层语言各有优缺点。
JavaScript/TypeScript 拥有庞大的社区，这意味着拥有大量的可用库。
另一方面，Dart 是一种编译语言，可以在运行之前将其代码转换为机器代码。这使得 Dart 应用程序比 JavaScript/TypeScript 应用程序更快。
#2. 组件和渲染
框架的渲染方式及其组件会影响应用程序的性能。
React Native
React Native 的 UI 组件是基于原生平台（Android 和 iOS）的组件构建的，因此响应迅速。React Native 提供各种组件，例如 “View”、”Image”、”Text”、”ScrollView”、”Touchable” 和 “TextInput”。
由于 React Native 使用底层操作系统的 UI 组件，因此在不同平台上开发的应用程序可能具有不同的外观。
Flutter
Flutter 使用 Google 维护的 UI 组件库。这些组件使用 Skia 图形引擎构建，具有快速和灵活的特点。一些常用的 Flutter UI 组件包括 Cupertino 小部件和 Material Design 小部件。
用户还可以通过重写现有的小部件或从头开始创建自定义小部件。
使用 Flutter 创建的应用程序具有一致的用户界面/用户体验，不受操作系统的影响。
胜者
这两个框架在 UI 组件方面都表现出色。选择哪一个取决于开发人员的经验、偏好和个人喜好。
#3. 库和社区支持
可用库的数量和社区支持是开发过程中不可忽视的因素。
React Native
React Native 基于两种最流行的编程语言，其中 JavaScript 的支持率为 65%，TypeScript 的支持率为 35%。
JavaScript 已经存在超过 20 年，拥有一个大型的社区和丰富的库。所有 React Native 的库都可以在 reactnative.directory 上找到。
Flutter
Flutter 基于 Dart 语言，它的流行度低于 10%。尽管如此，Flutter 平台拥有一个不断涌现的新社区，不断创建新的库。Dart 语言于 2011 年推出。所有 Dart 和 Flutter 的包都可以在 pub.dev 仓库中找到。
胜者
React Native 在库的可用性和社区支持方面略胜一筹。
#4. 性能
现代用户非常关注应用程序的性能。
React Native
React Native 是一个基于 JavaScript (一种解释型语言) 的框架。JavaScript 没有编译步骤，需要浏览器来读取、解释并执行每一行代码。
Flutter
Flutter 是一个基于 Dart (一种编译型语言) 的框架。编译型语言会在执行之前将代码转换为机器可读的代码。
胜者
Flutter 凭借其编译型语言的性能优势获胜。然而，在功能简单的应用程序中，性能差异可能并不明显。
#5. 状态管理
状态管理是一种用于管理应用程序状态的模式或技术。例如，当用户登录应用程序并输入数据时，状态会发生改变，需要进行管理。
React Native
在 React Native 应用程序中，有几种管理状态的方法。第一种方法是通过 “Context”，这是一个允许在不同组件之间共享状态的内置 API。Context 适用于中小型应用程序。对于大型应用程序，您可以使用 MobX 和 Redux 等状态管理库。
Flutter
Flutter 使用多种方法来管理状态。如果您的应用程序规模较小，可以使用 Riverpod 和 Provider 等包来管理状态。
Flutter 还使用业务逻辑组件 (BLoC 模式) 进行状态管理。这种方法将业务逻辑与表示层分开。在这种方法中，使用流和事件来管理状态。
胜者
React Native 和 Flutter 都有优秀的管理状态的方法，难分伯仲。您还可以使用 Redux 来管理这两者的状态。
#6. 学习曲线
对于初学者和有经验的开发人员来说，学习一个新框架的难易程度或所需时间是一个重要的考虑因素。尽管每个人的学习能力不同，但某些语言/框架比其他语言/框架更容易学习。
React Native
React Native 使用拥有庞大用户群的 JavaScript。该框架创建于 2015 年，并且获得了广泛关注。该平台在 GitHub 上有超过 23,000 个分支和 109,000 个星。
如果您已经熟悉 JavaScript，那么学习 React Native 应该不会太难。有大量的 JavaScript 和 React Native 资源可供借鉴。
Flutter
Flutter 使用 Dart 语言。Flutter 于 2017 年推出，并没有那么受欢迎。虽然学习 Dart/Flutter 很容易，但由于 Dart 是一种小众语言，因此可能找不到太多资源。Flutter 在 GitHub 上有超过 25,000 个分支。
胜者
很难说出这个类别中的绝对赢家。已经熟悉 JavaScript 的人可能更倾向于 React Native。
另一方面，熟悉 Dart 的开发人员很可能选择 Flutter 而不是 React Native。如果开发人员不熟悉 JavaScript 或 Dart，那么选择哪个跨平台框架取决于个人喜好。
使用 Flutter 的知名品牌
Flutter 已被用于开发各种 Google 的移动应用程序。其他使用该框架的品牌包括：
- 阿里巴巴集团
- 艾比路工作室
- Google Play
- eBay
- Crowdsource
- 4 Pics 1 Word
使用 React Native 的品牌
React Native 已被许多大型品牌用于开发其 Android 和 iOS 应用程序。 一些知名品牌包括：
- Facebook 广告管理器
- Microsoft 应用程序 (Microsoft Office, Skype, Microsoft Teams 和 Xbox Game Pass)
- Shopify, Shopify Inbox 和 Shopify POS
何时避免使用 Flutter 和 React Native
像 Flutter 和 React Native 这样的跨平台开发平台可以节省大量的开发资源和时间。但是，这些平台并非适用于所有类型的应用程序。以下是一些不适合使用这两个平台的场景：
- 应用程序需要使用底层操作系统的某些特定功能：您的应用程序可能需要使用特定操作系统原生的功能，例如麦克风。
- 您需要高性能的应用程序：如果您需要一个具有高响应性和卓越性能的应用程序，那么跨平台开发解决方案可能不是最佳选择。
结论
如果您需要快速构建应用程序，Flutter 可能是您最好的选择。但是，如果您希望开发一个基于拥有庞大社区的语言的应用程序，那么 React Native 应该是您的首选。
您下一个跨平台项目是使用 Flutter 还是 React Native，将取决于您对底层语言的掌握程度、您希望开发的应用程序类型以及您的个人喜好。JavaScript 开发人员更有可能选择 React Native，而 Dart 程序员则更喜欢 Flutter。
接下来，您可以进一步探索 React 与 React Native 的区别。