[Flutter翻译]Flutter vs React Native: 最终的比较多年来，对开发者来说，比较Flutte

原文地址：getstream.io/blog/flutte…

原文作者：

发布时间：2021年9月14日

本文由简悦SimpRead 转码，原文地址 getstream.io

哪个平台更好。Flutter或React Native？Stream涵盖了每个框架，所以你可以做出b......。

多年来，对开发者来说，比较Flutter和React Native已经很常见了。两者都是盛行的多平台工具，用于快速、轻松地构建移动应用程序。

如果你走进一个开发者聚会并问道："我应该选什么，Flutter还是React Native？"，你就为一场非常激烈的辩论埋下了伏笔。

在这篇博文中，让我们试着公平和尊重地回答这个问题。最终，平台的选择只是应用程序成功的众多因素之一。

在这篇文章中，我们将涵盖以下主题。

开发者经验
- 文档
- 工具
- 第三方软件包
开发者的生产力
性能
社区
未来

在我们开始之前，有必要提及的是，我白天是一名Flutter开发者。虽然这篇博文已经被我们的Flutter和React Native工程团队审核过，但我认为有必要澄清一下🙂。

还需要提到的是，在Stream，我们有使用这两个框架的经验。事实上，我们有专门的团队负责每个Chat Messing SDK。这对更大的开发者社区有利，因为考虑使用Stream的团队不会被迫采用他们不想使用的框架，以便为他们的终端用户提供无缝的聊天体验。

也就是说，让我们讨论一下这些框架有什么不同，以及它们对不同的团队、开发人员和用例有什么吸引力。

开发者体验

"开发者体验 "是有经验的开发者和用户在使用一个库时的总体感觉。从该库的文档到实际的API表面都会影响开发者的体验，这往往使其成为团队在决定一个新的应用程序的SDK时的首要考虑因素。

就Flutter而言，开发者和公司很容易通过量化数据来衡量社区对SDK的总体感觉和满意度。谷歌的团队每季度都会向Flutter的开发者发送调查报告，然后公布一份详细的报告，说明他们的调查结果。

在最新的第二季度Flutter报告中，一个突出的数据是该库的满意率。在第二季度末，Flutter在其用户群中拥有92%的满意率。

满意率可以归因于Flutter做得好的几个关键点。

API文档和样本
开发者关系团队和Flutter社区在记录该框架的API和通用模式方面做得非常出色。他们最近鼓励开发者"采用 "小部件的活动不仅为外部贡献打开了大门，而且还为常见的Flutter小部件提供了几十个代码样本。

开发者工具
开发者工具是Flutter体验的一个核心部分。该框架致力于建立和投资于开发者工具。Flutter的DevTools是一套交互式的性能和调试工具，允许开发人员从Chrome中直接与他们的IDE进行交互。使用Flutter DevTools，开发者可以轻松调试常见的布局问题，交互式地调整布局，以及更多。

第三方包
Flutter和Dart也有一个名为Pub的软件包管理系统。在Pub上，开发者可以上传、浏览和使用由社区创建的软件包。Pub上的软件包包括从Flutter部件到纯Dart库，如http和crypto。Flutter团队和社区一起在 "Flutter收藏夹 "标签下审查流行的软件包。这使得新的开发者很容易为他们的项目快速识别高质量（和值得信赖）的库。

在开发者体验方面，React Native在某些方面与Flutter相似。Facebook的团队在React Native的入门页面上做了很好的信息铺垫工作。在这个页面上，开发者可以在导游的带领下了解这个框架。

虽然我找不到任何关于React Native的官方用户研究，但值得注意的是，React Native存在的时间比Flutter长很多。因此，与Flutter相比，它有相当多的社区支持者。

React Native的包和插件的数量远远超过Flutter，因为开发者可以使用大多数JS库和React包。

在工具方面，React Native的开发者比Flutter的开发者有更多的选择。鉴于该框架的成熟度及其利用JS工具链的能力，React Native开发者可以从大量的库存JS工具中选择，以改善他们的工作流程。其中一些包括VSCode等IDE和ESLint等lint包。

Flutter的特制DevTools确实有助于将该框架与React Native区分开来。它允许开发人员快速调试非常复杂的布局、性能和网络问题，而无需安装额外的工具。除了标准的React Developer Tools，React Native现在还支持Flipper，这是一个用于React Native应用的可扩展移动应用调试器。

Flipper的React Native的调试器。fbflipper.com/

如果你想了解更多关于React Native工具的信息，请查看Instabug的帖子，涵盖了这个主题。

综上所述，这两个平台的开发者体验是你在2021年对现代开发框架的期望。它们都有很好的文档（Flutter在这方面略有优势），有详细的指南和开发者工具。

开发者的生产力

开发者生产力是事情真正变得有趣的地方。让我们在本节前声明，这里的一些观点完全取决于个人偏好。每个开发者都是不同的，每个人都喜欢自己的工作流程和工具。如果你有这样或那样的想法，请（恭敬地）告诉我们吧 🙂。反馈总是有帮助的。

当关注开发者的生产力时，我们将通过以下视角来考察每个框架。

语言选择
开发者生态系统（包和插件

语言选择

让我们从可能是争论最多的话题开始：语言选择。语言的选择会对整个框架产生连锁反应。除了开发者的生产力之外，语言的选择直接影响到框架的性能--这一点我们将在后面深入讨论。

React Native

React Native使用JavaScript（JS）作为其首选语言。该框架本身是基于流行的ReactJS项目。因此，React Native在开发者中具有很大的优势。如果你曾经在网络上使用React构建过一个应用程序，那么过渡到编写你的第一个React Native应用程序将是非常容易的。

在大多数情况下，你的React Native代码的结构与你的React代码非常相似。事实上，甚至有可能在React Native项目中重复使用React项目中的逻辑。

虽然使用JS允许开发人员在他们的应用程序中利用开发人员为网络构建的大量项目和库，但它也有一些严重的缺点。

首先，除非你选择使用Typescript（它只增加了静态类型），否则JS是一种动态语言。这意味着在逻辑中没有健全的类型系统或空安全存在。

如果你从事过原生应用开发，并且你正在评估React Native作为你的第一个跨平台框架，缺乏强大的类型和分析器警告可能一开始会让你震惊。虽然像ESLint这样的工具有助于减少你的代码中明显的bug数量，但仍有可能遇到一些只有在运行时才能发现的意外情况。

由于JS不能编译成本地机器代码，所有作为你的React Native应用程序的一部分编写的代码都需要在用户的设备上用JS虚拟机进行编译。

我并不是说动态语言很糟糕。一些开发者喜欢使用JS，因为它的灵活性和低门槛。然而，需要注意的是，在处理较大的应用程序时，你会很容易出现错误，而这些错误在原生或强类型的世界中是极其罕见的 🙂

Flutter

Flutter作为一个框架处于一个独特的位置。Dart是Flutter用来编写大部分堆栈的语言，也由谷歌和Flutter团队维护。(作为一个有趣的事实，Dart和Flutter团队共享同一个集团产品经理😉）。)

这意味着该团队可以优化框架（Flutter）和语言（Dart），以帮助改善开发人员的体验。这方面的一个完美例子是最近增加的条件字面和扩散运算符。两者都是对语言的小补充，在使其对使用Flutter构建应用程序的开发者更有用方面起了很大作用。

就语言本身而言，Dart可以被描述为具有c风格的语法，对于过去使用过JS、C#或Java的开发者来说，应该感到非常熟悉。

与JS不同，Dart是静态类型的，最近还更新了sound-null-safety。现代Dart代码现在默认是不可空的，这意味着编译器可以在潜在的空引用错误发生之前警告你。

值得一提的是，Dart可以使用JIT（Just-in-time）和AOT（Ahead-of-Time）两种模式进行编译，这意味着开发者可以从使用JIT的快速迭代开发周期中获益，但也可以为终端用户生成使用AOT编译的小型高性能应用程序。该语言还可以在桌面和移动设备上编译成本地机器代码，因此在生产应用中不需要虚拟机。

虽然Flutter不像JS那样有大量的开源包供其使用，但它在性能上弥补了这一点。一个写得很好的Flutter应用程序可以在生产中轻松地以60-120fps的速度运行。

此外，开发人员可以将大型计算任务，如JSON解码或排序，卸载到后台隔离（Flutter/Dart的线程版本），以帮助保持性能并避免阻塞UI。

开发者生态系统

任何SDK或框架的一个关键卖点是其周围的工具和生态系统。这两个SDK都有一个非常庞大和热情的开发者生态系统，为开源做出了贡献。

React Native有一个很大的好处，因为开发者可以在他们的应用程序中利用大多数开源的JS库。因此，开发者可以进入他们最喜欢的包管理器（npmjs想到的是），搜索能解决他们使用情况的JS包，并轻松将其添加到他们的应用程序中。

另一方面，Flutter有一个健康的开源存在，但与React Native开发者可以选择的包的数量相比，它显得微不足道。

例如，根据libraries.io，目前Pub上的软件包总数为24952个，而npm上的软件包数量为198万个。

就这两个平台而言，在NPM和Pub.dev上发现各种各样的项目并不少见。为了帮助开发者为他们的项目挑选合适的软件包，并给予额外的信心，Flutter团队启动了一个Flutter Favorites计划，对常用的软件包进行审查。

虽然NPM是最受欢迎的JS包来源，但值得注意的是，NPM上的包并非都支持React Native。React Native Directory是一个专门用于托管React Native库的网站，目前列出了982个库。

性能

显而易见，Flutter和React Native之间一直存在着明显的性能差距。多年来，这种性能上的差距已经缩小了。今天，虽然差距没有以前那么大，但Flutter仍然比React Native有一点优势，但对于大多数应用程序来说，这一点可以忽略不计。

虽然这两个框架的广告会让你相信它们都是 "真正的原生 "应用程序，但这并不一定是真的。

React Native的性能

在React Native中，UI是由来自Android和iOS的本地组件组成。这意味着你使用的是每个版本的操作系统所配备的平台部件。

图片来源。reactnative.dev/docs/intro-…

当开发者在他们的应用程序中使用Text来显示信息时，在引擎盖下React Native在Android上显示一个TextView，在iOS上显示一个UITextView。这种方法当然有它的优点，因为终端用户总是熟悉的UI，而且每个设备都是原生的。

另一方面，代码和业务逻辑是用JS编写的，然后使用JS虚拟机和桥接在设备上执行。当开发者想到React Native的缺点时，通常会想到这种设置。

不谈无关紧要的细节，这种架构的选择意味着，为了更新UI或改变应用程序的某些部分，编写的JS代码不仅需要被解释，而且还需要添加到队列中，以便它能够穿过框架桥与本地模块进行交互。

对于React Native来说，这并不全是坏事；事实上，这恰恰相反。Facebook的团队一直在努力为React Native开发一个新的架构，以解决上述的主要问题。值得注意的是，废除了桥接并引入了JSI，这是一种允许React Native的JS线程和本地模块之间直接通信的机制。

如果你感到好奇，请阅读更多关于React Native的 "重新架构"。

Flutter性能

在Flutter的世界里，事情是非常不同的。与React Native不同，Flutter并不依赖本地组件或视图。相反，Flutter绘制了屏幕上的每一个像素，让开发者完全控制了绘制和布局周期。把Flutter看成是一个游戏引擎，但用于构建应用程序，可能会更容易。

该框架由五个不同的层次组成。

材料和Cupertino。Material和Cupertino库提供了全面的控件集，使用widget层的组合基元来实现Material或iOS设计语言。
Widgets。小部件层是一个组合抽象。渲染层中的每个渲染对象在widgets层中都有一个对应的类。此外，widgets层允许你定义可以重复使用的类的组合。这是引入反应式编程模型的那一层。
渲染。渲染层提供了一个处理布局的抽象。通过这一层，你可以建立一棵可渲染对象的树。你可以动态地操作这些对象，树会自动更新布局以反映你的变化。
Dart UI: 基本的基础类和构建块服务，如动画、绘画和手势，在底层基础上提供常用的抽象。

使用积极的组合，开发人员可以使用这些层中的每一个小部件来使他们的应用程序变得生动。

这种代码的编译结果是一个快速和响应的应用程序。由于Flutter使用Dart作为其语言，应用程序能够被直接编译为本地机器代码，这意味着在生产中不需要虚拟机或桥接。此外，Flutter的开发者还可以受益于外国函数接口（FFI），在他们的应用程序中快速有效地与C（或任何其他兼容语言）代码进行交互。