Flutter vs. React Native: 2023 年哪个更好？

type

status

date

slug

summary

概述

移动应用程序业务正在稳步增长。如今几乎每个人都有一部智能手机，所以潜在的客户数量几乎是无限的。这就是为什么现在每家公司都在努力制作移动应用程序，以便在自己的细分市场中保持竞争力。

设计并构建应用程序有许多方式。你可以使用原生的方法，例如使用不同的语言（Android的 Java 和 Kotlin，iOS 的 Swift 和Object-C）去为每个平台开发各自的应用。但是也有一种跨平台的开发方式，即软件工程师编写一套代码就可以运行在所有移动设备上。为了实现这个目标，市场上有许多专门的框架，如今最受欢迎的就是Flutter 和 React Native。Flutter 在过去几年再开发者中十分受欢迎，并在 2021 年 Statista 排名中名列榜首，React Native 则紧随其后排在第二位。

我们会在本文中讨论 Flutter 和 React Native的功能，以及他们的优缺点。

Flutter 是什么

Flutter 是谷歌推出的一个相当年轻（2017 年推出）的SDK。这是一个开源免费的工具，开发者使用一套代码就可以开发跨平台的移动应用，同时也可以用于开发网站、桌面端以及嵌入式设备。使用Flutter，你可以开发 MVP 和全功能产品。

Flutter 本身是用 C/C++ 和 Dart 写的，但是它使用 Dart 进行 App开发。

对于开发 Android 和 iOS 应用而言，Dart目前是最快的编程语言。它可以帮助你创建功能完善的 UI 组件，并有着良好的 IDE支持，如代码补全等。同时他还允许热更新且使用面向对象编程。通过它，你可以创建灵活而富有表现力的用户界面，并在本地运行。

组成 Flutter 的两部分：

SDK，一个包含一系列开发、调试、性能分析等功能的工具

框架本身，他是一个基于 widget的用户界面库。它包含button、text与sliders等，同时你也可以自定义一些组件。

使用 Flutter 开发的 App 基于一套代码，并且 Dart语言会被编译成本机代码——这也提高了应用的性能。这些 App使用图形处理单元（GPU）去渲染界面，并调用相应平台的 API和服务（相机、本地存储等）。

一个现代的移动引用程序应具备精美的设计、流畅的动画以及出色的性能。为了实现这一目标，开发者必须在不牺牲性能和质量的前提下快速地开发新功能。这也是Goole 推出 Flutter 的原因。当 Flutter首次亮相时，开发者就惊艳于它相比其他跨平台 App在移动设备上的优异表现。

Flutter 的优缺点

Flutter 的优点

开发快速：借助Flutter，你可以快速开发原型甚至是现成的应用程序。在 Web 端，Flutter也非常适合开发渐进式 Web 应用、单页应用和为已有的移动应用程序开发 Web版本

热加载：这一特性确保了快速的编译和最大化的性能。你可以修改项目中的元素与Widget，他会在不影响应用状态的前提下更新应用的 UI

完美的性能：基于 Flutter 的 App运行非常快，可以达到 60fps 甚至更高

丰富的自定义 Widget：Flutter 提供了大量基于Materai Design（Goole 风格）或 Cupertino 框架（Apple 风格）的Widget，这是移动应用程序看起来非常漂亮

整合方便：Flutter可以和许多受欢迎的开发工具结合，如 VScode、Android Studio 和Scode，这意味着你可以使用你最喜欢的编辑器或 IDE 进行开发。同样的 Flutter上的引用也可以狠容易地整合到 Google 设备上，因为 Google就是框架的创建者

灵活且富有表现力的 UI：Flutter 提供了Widget、渲染、动画和手势，使你能完全控制屏幕上的每一个像素。这意味着你可以为你的应用程序创建原始的自定义设计

原生应用程序：使用 Flutter 开发的应用在 Android和 iOS 上有一套通用的UI。所以你可以为两个平台开发一套高适配性的用户界面——在谷歌商店，他们看起来就像Material Design；在 App Store 则像 Cupertino design

开源：因为 Flutter时开源的，所以这个框架现有的解决方案一直在增加。你可以在你的项目中使用现成的解决方案，或者创建全新的内容，从而为Flutter 项目的发展和改进做出贡献

学习简单：从零开始学习 Flutter 总共需要 3-4个月。该平台基于 Dart 语言——一种与常用的 C#、Java 和 Javascript语法相似的语言，这意味着对于新手或有经验的开发者来说学习非常简单

优秀的文档：Flutter 和 Dart都提供了详细的文档，这简化了它们的学习和实际使用过程

Flutter 对新手非常友好：如果你不了解移动开发流程，那就选择Flutter，因为他提供了一种快速、有趣和现代化的方式去构建本地移动应用。如果你是一个经验丰富的开发者，那么你可以尝试这个令人惊艳的开发工具。

Flutter 的缺点

新生项目：Flutter是一项年轻的技术，因此可能会涉及到错误、与更新相关的问题，以及其他年轻工具所具有的各种“美妙之处”。

Dart 是一个小众的语言：为了开发Flutter，开发者不得不去花时间学习一门新语言与新的开发方式。因此 Dart开发人员数量较少，难以找到合格的资深开发者

性能强劲的电脑：Dart会创建自己的虚拟机，这会消耗计算机资源。此外，模拟器和 IDE也会消耗内存与处理器容量。因此如果你的电脑处理器较弱且内存低于8GB，那么开发 Flutter 会非常困难

React Native 是什么

React Native是一个强大的免费且开源的框架。如今它是世界上最受欢迎的框架之一。如同Flutter 一样，它支持一套代码运行在多个平台。它允许为iOS、Android、Windows 和 macOS 开发跨平台应用

因为 React Native 使用 Javascript 语言并且使用 React库，所以开发者创建应用的 Web 版本非常容易，并且能够确保较快的开发时间与bug 修复。需要注意的是虽然 React Native 使用 React作为他的基础库，但是它并不是 React 的升级版本。

React（又称 Reactjs）是一个用于创建网站用户界的库，由Facebook 工程师团队在 2013 年开发。React Native 是一个由 React支持的全功能框架，他发布于 2015 年（同样也是由 Facebook工程师团队），它旨在使开发人员能够使用一套 UI 组件来快速编译和运行 iOS和 Android 应用程序。

React Native 的优缺点

React Native 的优点

成本效益：React Native提供了一套通过代码复用的低成本方式实现跨平台应用开发。应用程序可以在多个平台上高效运行，这对产品所有者来说非常受欢迎。相比于为iOS 与 Android 开发两套不同的 app，开发者在两个平台上复用 90%的代码。这意味着可以降低开发成本，并且使 React Native 更容易维护。

模块化设计：React Native使用模块化编程技术，即函数被单独地实现在一个区域中——我们称之为模块。这种方法提供了灵活的应用开发环境同时也便于开发者之间的协作。他还简化了应用程序的更新的创建与集成。

快速上线：React Native 快速开发 App的能力是它最具信服力的功能之一。开发人员使用各种现成的组件，以比以往更快的速度构建应用程序功能。ReactNative 代码的编写也比其他开发平台更简单，因此构建和运行 React Native App非常容易。

热加载：这是最有用和最喜迎开发者的功能之一，它使开发者能够实时看到对代码的更改，这样你就可以更新一个运行中的应用。你所需要做的只是编辑代码，文件保存后应用就会实时进行更新。因此，开发人员不需要将应用强制停机就可以发布更新。

优秀的性能：原生应用的开发确保了更好的性能，但是使用React Native开发的应用也有着相比于原生应用令人惊艳的性能。这是由于内控件——一种封装了原生操作系统的组件，从而使使开发者能够平滑地调用原生API。

原生外观和体验：用户很难区分原生应用和 React Native应用，因为 React Natvie 应用的 UI 看起来与原生应用完全一致。这主要得益于 Javascript 与原生环境交互的强大能力。

庞大且活跃的社区：React Native是一个开源平台，这意味着任何人、任何开发者都可以给他做贡献。当你开发 App遇到问题时你可以与社区联系以获得支持。

React Native 的缺点

在你决定开发 React Native 应用之前有一些 React Native的短板你需要提前知道 “

调试和兼容问题：尽管有完善的功能，但 React Native仍然处于测试阶段。这就是为什么它任然有一些显而易见的问题，例如复杂应用的调试和限制，包括兼容性问题。

较差的内存管理：React Native具有强大的应用构建功能，但是并不是构建高效管理硬件资源应用的平台。因为React Native的内存管理并不达标，所以你不应该将它作为构建高性能软件的解决方案。如果你构建的应用涉及到了复杂的计算，你最好去寻找其他可替代的开发平台。

Flutter 与 React Native之间的区别

ㅤ	Flutter	React Native
发布日期	2017	2015
所有者	Google	Facebook
许可证	开源	开源
编程语言	Dart	Javascript
架构	Skia	Flux
安装	较慢（从 GitHub 获取二进制文件，使用 ZIP 进行压缩。）	较快（NPM）包管理
UI 和开发 API	自定义 Widget；不依赖第三方库	原生 iOS 和 Android 的 UI 组件；依赖第三方库
开发时间	较慢	较快
代码复用性	复用性高	复用性低
质量保证	一系列丰富的测试功能	第三方测试工具
生态和社区支持	比较小	较大
DevOps 和 CI/CD 支持	官方指导	无官方指导
发布	较简单	较困难
性能	更快	较慢
文档	易读	较复杂

编程语言

一旦你选择使用 Flutter去开发应用，你就需要去学习一门新的编程语言——Dart。Dart是一门相对来说非常年轻的语言（出现于 2011 年），由 Google 开发用于替换Javascript。这门语言有着优雅的面向对象的语法，文档完善，有上千个示例，所以切换到这门语言几乎很容易。

React Native 使用 JavaScript这门成熟的语言，这门语言有着丰富的教程，在全世界有数百万的支持者。一方面JavaScript 已经确立了自己的地位并在动态 Web开发中扮演着关键角色。另一方面，得益于超前编译器和即时编译器，Dart可以将 JavaScript 的性能提高一倍。

至于速度，Flutter 和 Dart明显更快。但是如果你的主要考虑是成熟度和丰富的开发者，则应该选择 React Native 和 Javascript。

架构

当选择跨平台移动应用开发环境时，我们首先要考虑的就是它的技术架构。知道框架的内部结构，你可以做出明智的决定，选择最适合你项目的产品。

React Native 的架构深受 Javascript Bridge 模式的影响，使用Javascript 编写的代码在运行时会被编译成机器码。React Native 使用由Facebook 开发的 Flux 架构，因此，这个平台使用一个特殊的 JavaScript Bridge 来与自己的模块进行通信，这也使得应用程序略显缓慢。

Flutter 使用的 Dart内置了大多数组件，因此他的体积比较大且不需要空间去与自己的模块交互。Dart有许多框架如 Material Design 和Cupertino，这为开发移动应用提供了许多必要的技术。与此同时，Dart 使用了由C++ 编写的 Skia 图形引擎。综上所述，Flutter在引擎本身中拥有所有必要的核心组件，因此它的应用程序更快。

安装

React Native 使用 Node.js 的 NPM包管理器就可以安装，对于经验丰富的 Javascript 开发者来说，React Native的安装过程非常简单，其他开发者则需要学习基础的 NPM 包管理器的内容。

Flutter 从 Github下载特定平台的二进制文件就可以安装，或者是从官网下载 zip压缩包，之后你需要把bin文件夹添加到系统环境变量中。相比于React Native，Flutter 的安装可能需要更多步骤。

因此，无论是 React Native 还是Flutter，在其各自的操作系统特定软件包管理器中都无法进行一键式的安装。然而安装Flutter 可能需要更多额外的步骤，因此它的安装过程可能会慢一点。

UI 和开发 API

React Native 使用原生 iOS 和 Android组件，并且为渲染用户界面和访问设备提供了API。为了访问大多数原生模块，React Native不得不依赖第三方库，所以他严重依赖第三方库。Flutter 不使用原生 UI 元素，而是提供从头开始渲染的自定义Widget。使用 Flutter 进行 UI 开发涉及到与 UI 渲染组件、设备 API访问、导航、测试、状态管理以及许多库进行连接，需要进行广泛的定制。丰富的组件使得Flutter 不需要依赖第三方库，使用Flutter，你将拥有开发移动应用所需的一切。

开发时间

对于有 Javascript 开发经验的程序员来说使用 React Native开发跨平台应用非常简单。此外，热加载功能在测试用户界面的更改时也节省了许多时间。至于IDE的支持，开发者可以使用任何文本编辑器或者是开发环境，这也有助于简化流程。

虽然 Flutter也有热加载的功能，然而随着应用复杂性的增加，开发者需要额外的时间去学习新的Flutter 内容。更重要的是，Dart并不是一个常见的编程语言，许多文本剪辑器和 IDE并不支持他，这可能会时开发流程变慢。

代码复用性

尽管这两个框架都可以实现代码的重用，但 Flutter在这方面提供了更多的机会。在 Flutter中，你只需要更改一行，指定新的业务逻辑，然后重用代码库。在 React Native中，由于代码并不兼容所有平台，所以并不能直接复用，开发者有时候需要寻找其他组件并调整代码库。

质量保证

React Native 是一个 Javascript 框架并且 Javascript本身提供了许多单元测试框架。然而，就集成或在 UI 层面进行测试而言，React Native 并没有提供任何官方支持。也有许多第三方库如 Appium 或 Detox可以用来测试 React Native 应用。

相反的，Flutter 在模块化、Widget和集成方面提供了丰富的测试功能，有着出色的应用测试文档。

生态和社区支持

React Native 于 2015年推出，自那以后一直在不断增长的受欢迎度。该框架在 GitHub上拥有庞大的开发者社区，以及世界各地举行的众多聚会和会议。

Flutter 发布滞后两年，但是已经受到了很多关注。特别是由于Google 的推广。Flutter 社区虽然比 React Native小，但是如今他在快速增长，并且也在组织许多会议或聚会。

DevOps 和 CI/CD 支持

React Native没有针对设置持续交付的官方文档。然而你可以在网上找到许多这一主题的文章。因此，你可以通过Azure DevOps 了解如何构建 React Native 应用的持续交付流水线。Flutter框架有一个关于持续集成的部分，其中包含指向外部资源的链接。Flutter丰富的命令行界面使得设置持续交付十分容易。因此，Flutter的应用程序配置这些服务非常轻松，而 React Native对此并没有提供官方的指导。

发布

得益于 Google 的努力 Flutter应用的发布非常简单，他更主动自动化和灵活性能。而在使用 React Native时，你处理手动操作和复杂的协议。

性能

选择一款框架时性能极其重要，在这方面 Flutter完胜。这个框架加快了代码编写的速度，同时其 C++ 引擎和 Skia图形库使你能够为所有平台创建高性能的应用程序。

为了在 JavaScript 和原生代码之间交互，React Native 使用的一个Bridge。有时候这取决于 UI 的渲染并且会导致其他性能问题。因为 Flutter通过内置的库与框架与原生元素交互，它并不需要这一机制。

文档

至于文档，Flutter 也是胜者。得益于优秀的文档，Flutter对于新手来说入门非常容易。而 React Native的文档更加复杂，并且假设用户已经有了 Javascript 开发经验。

结语

Flutter 和 React Native都是优秀的构建跨平台应用框架。虽然他们之间有许多相似点，但是在你决定选择一个之前你需要意识到他们之间显著的不同。事实上，这两个工具都是现代化的、非常流行的，可以用于高端的跨平台项目。为了决定最合适的选择，你应该彻底分析项目需求，权衡利弊。

概述