React Native和Flutter有什么区别？

Question

在技术层面上，React Native 和 Flutter 有什么区别呢？

这两项技术似乎都能实现类似的功能，而且 Flutter 还认可从 React 中汲取了灵感：faq

当它们列出相同的功能并且语法几乎相同（例如 StatefulWidget 与 Component 类），这一点变得更加明显。

与 AngularDart 是 Angular 的 Dart 实现类似；那么可以认为 Flutter 是 React 的 Dart 实现吗？

- Rémi Rousselet

Answer 1

从架构上看，React Native（RN）和Flutter非常相似。

Flutter所谓的“Widget”与React的“Component”完全等同。这就是Flutter从React中获得启示的原因。

它们之间的区别在框架的其他方面：

解释的Javascript VS 编译的Dart

Flutter使用Dart，一种提供“即时”（JIT）和“AOT”（包括树摇）编译的类型语言。

在开发中，Flutter使用JIT编译来实现热重载。对于生产构建，则使用AOT编译以获得更好的性能。

---

React-Native使用增强了某些语法糖的Javascript JSX。

JSX是一种不同的语言，它会编译成JS，然后在运行时进行评估。

与本机的桥梁 VS 完全重写

React Native是建立在本机之上的。

当在React Native中使用按钮或文本时，您正在操作用于本机Android / iOS应用程序的正式对象。

我们可以将React视为Android / iOS之间声明布局的通用语言-但从根本上讲，应用程序是存在潜在差异的。

它不是真正的跨平台。但同时，它允许更好地与本机元素互操作。

---

Flutter则相反。 Flutter的目标是尽可能少地使用本机元素。

Flutter向操作系统请求一个窗口，然后使用Dart和Skia（它是C++图形引擎）完全管理其内容。

这有一些含义：

• 所有UI逻辑都必须由Flutter重新实现。包括滚动、触摸事件、动画等等
• 应用程序完全用Dart编写，甚至深入到较低的层次。这意味着无论平台如何，执行的总是相同的代码。
• 潜在地，任何能够运行Dart代码并创建窗口的东西都可以运行Flutter，并且应用程序几乎不需要更改。因此，Web正在进行中（Hummingbird），而桌面的基本支持也已经可用。

某种程度上，我们可以将Flutter与WebView/游戏引擎进行比较，但它针对的是休闲应用程序进行了优化。

- Rémi Rousselet

---

所以你基本上是问了一个问题，只是为了自己回答它？ - dentemm

这是Stackoverflow建议分享你的知识。他们甚至在“提问”页面上添加了一个按钮以此为例。请参见https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/。 - Rémi Rousselet

几个小时前，我问了同样的问题，有一些人对它进行了负评：>) - Hardik Virani

“Flutter和React Native有什么区别？”这是一个非常常见的问题，因此将其记录在某个地方而不是关闭此问题是有意义的。 - Iiro Krankka

@RémiRousselet，您在最后一行中所说的“针对休闲应用进行优化”是什么意思？这是否意味着Flutter不适合成熟/复杂的应用程序？ - Aman Kataria

Answer 2

Remi已经提出了几个好点子，我再补充一个。

使用桥接的解释器 - 与原生和无桥接相对比

尽管名称可能暗示React Native应用程序编译为本机代码，但实际上它们没有。React Native应用程序在运行时解释Javascript代码，并且React Native应用程序中的组件更新通过桥接到本地视图对应物。这可能会稍微减慢速度并成为瓶颈。

相反，在发布模式下，Flutter应用程序编译为本机代码，并且不需要桥接来操作UI。这反过来，至少在理论上，将更加高效-没有必要在“本地土地”上进行往返以进行简单的UI更改。更不用说发布Flutter代码是本地编译的，没有涉及解释器。

让我们看看这两个东西究竟是什么。

跳舞的猴子

现在我们知道发布模式的Flutter应用程序没有解释器或需要桥接进行UI操作，让我们看看这两个东西究竟是什么。我们将使用一个高度假设的示例应用程序。我们的React Native应用程序有一个按钮，可以使屏幕上的猴子跳舞。在React Native中，我们的按钮和跳舞的猴子组件是用Javascript和React编写的。

解释器

由于Javascript在Android或iOS上不是一流语言，因此您的React Native应用程序包括一个Javascript解释器，该解释器在运行时解释您的Javascript代码。没有解释器，您将无法使用Javascript编写应用程序，即使是简单的console.log('Hello World!')也不会起作用。

根据React Native文档，在“大多数情况下”，Javascript代码将使用JavascriptCore进行解释。

桥接

在幕后，React Native使用本机Android Views和iOS UIViews来显示UI组件（例如跳舞的猴子）在屏幕上。但是，由于Android和iOS SDK的UI部分不使用Javascript，因此您不能仅使用Javascript使猴子跳舞。

这就是桥梁发挥作用的地方。桥梁的另一侧是您在Javascript中编写的React Native组件和逻辑。在对面，我们有托管Android / iOS应用程序，它将本机视图渲染到屏幕上。从现在开始，让我们称桥梁的两侧为Javascript land和native land。

那么，当用户点击我们的“跳舞，猴子，跳舞！”按钮时会发生什么？

1. 本地的Android/iOS视图触发了一个点击事件，该事件会经过桥梁传递到Javascript领域。
2. 我们在Javascript中编写的onclick监听器会被调用。它是一个简单的调用，用于切换组件内的布尔值。类似于setState(() {isMonkeyDancing = true})或类似的内容。
3. React看到有些东西已经改变了。它提供了一个更新后的UI元素表示，其中包含一个跳舞的猴子。该表示只是一组描述UI更新状态的纯Javascript对象树。
4. Javascript对象树被序列化并发送到桥梁的另一侧，即本地领域。
5. 宿主应用程序接收到序列化的对象树并对其进行反序列化。现在它可以更新本地的Android/iOS视图以匹配反序列化的UI表示。我们的猴子现在在跳舞，我们的用户永远快乐。

因此，在这个例子中，一个按钮点击需要经过桥梁两次。

实际上，是三次 - 只需最初呈现一个按钮就是跨越桥梁的调用本身。 在一个不仅仅是一个按钮和跳舞猴子的应用程序中，您很可能会经常跨越桥梁更多次。每次这样做都需要序列化数据并从一侧发送到另一侧。

这比仅使用UI表示来快速更新UI直接要慢。此外，在运行时解释Javascript与预先编译代码相比，存在成本。

底线

由于Flutter本质上是一个可移植的渲染引擎，因此Flutter不需要桥接程序来进行UI更新。因为这个原因，至少在理论上，UI更新更快。这就是为什么使用Flutter构建具有复杂动画或类似Flare，SpriteWidget甚至游戏的应用程序相比React Native更具有吸引力的原因之一。

另外，由于Flutter在发布模式下是AOT编译的，所以Flutter也不需要解释器。这就是Flutter和React Native之间的区别。

- Iiro Krankka

---

@liroKrankka，我对React Native没有了解，但我认为他们计划移除桥接并用JavaScript接口替换，如果我错了请纠正我。 - BraveEvidence

调用非 UI 本地 API 呢？我猜它们都需要一个桥接器。 - Buzzware

@Buzzware 正确 - 如果您需要调用 Android / iOS 原生代码，例如位置 API、蓝牙等，则需要通过桥接器。这就是 Flutter 所谓的“平台通道”。但与 React Native 的区别在于，Flutter 不需要桥接器就可以在屏幕上显示内容。 - Iiro Krankka

Answer 3

Flutter vs React Native: 开发者的视角

Facebook 的 React Native 和 Google 的 Flutter 是两个备受瞩目的跨平台应用程序开发技术。在本文中，我们将从开发者的角度详细比较这两种技术。

Flutter 和 React Native 是什么？

React Native 是 Facebook 内部启动的一个项目，他们于2015年将其开源。另一方面，Flutter 是 Google 发起的一个项目，他们自 I/O 2017 以来一直在大力宣传。这两种技术都可以通过使用单一编程语言使应用程序开发人员更快地构建跨平台应用程序。React Native 已经是一个成熟的工具，并且拥有庞大的社区，但 Flutter 也从2017年开始看到了巨大的采用率。在本文中，我们将使用10个标准进行比较：

• 编程语言
• 技术架构
• 安装
• 配置和项目设置
• UI 组件和开发 API
• 开发者生产力
• 社区支持
• 测试支持
• 构建和发布自动化支持
• DevOps 和 CI/CD 支持

编程语言

使用跨平台移动应用程序开发技术的关键好处是能够使用单一编程语言为 iOS 和 Android 开发应用程序。

• React Native — JavaScript
• Flutter — Dart

安装

安装方法应该简单明了，没有太多复杂的步骤，以便初学者容易掌握。

• React Native - NPM
• Flutter - 从源码进行二进制下载

UI 组件和开发 API

• React Native - 较少组件
• Flutter - 组件丰富

结论

React Native 和 Flutter 都有其优点和缺点。一些行业专家预测 Flutter 是移动应用程序开发的未来。考虑到上面的比较，很明显 Flutter 已经非常强势地进入了跨平台移动开发竞赛。让我们不要预测未来，静待观察！

- SuccessFollower

Answer 4

如果你深入学习这两种技术，你会发现以下巨大的区别：

1. 编程语言 - JavaScript 和 Dart
2. 技术架构 - Flex 和 Skia。
3. UI 组件和开发 API：Flutter 中的 Widget，但在 React Native 中是 views。
4. 开发者生产力：在 Flutter 中调试非常容易。
5. 社区：React Native 有大型社区支持。
6. 文档和工具包：Flutter 团队为所有小部件创建了简单的文档。
7. 测试支持：Flutter 提供测试库。
8. DevOps 和 CI/CD：Flutter 提供 CI/CD 支持。

更多 React Native 和 Flutter 的区别 可以在这里阅读。

- Sunil