Flutter与React Native - 哪个是你下一个应用程序的最佳选择？

本文最初发布于Udemy的博客。Flutter vs React Native - 哪一个是你下一个应用程序的最佳选择？

专注于移动应用开发及其他领域，Flutter和React Native是目前市场上最受欢迎的两个跨平台框架。

但事情并不总是这样。

10多年来，苹果和谷歌一直在提供原生工具和SDK，为iOS和Android构建应用程序。一直以来，开发者不得不用不同的语言为不同的平台构建完全相同的应用程序。

对于企业来说，这是一个巨大的成本。而随着用户期望值的不断提高，需要更多的时间和金钱来制作出与众不同的应用程序。

Flutter和React Native改变了这种情况，使开发者能够用一个代码库编写应用程序，并在多个平台上运行。

虽然它们都不是银弹，但许多团队已经使用它们来缩短应用程序的上市时间。

本文对Flutter和React Native进行了深入比较。这将帮助你了解它们的优点和缺点，并让你明确何时使用其中一个。

Flutter与React Native：渊源

Flutter是由谷歌制作的，它在2017年首次公布。React Native开始于Facebook，于2015年开源。

Flutter与React Native的对比：随着时间的推移，兴趣。来源。谷歌趋势。

两者在今天都非常流行。虽然React Native非常成熟，而且有一个很大的社区，但Flutter的发展速度更快，最近在搜索趋势和GitHub星级上都超过了React Native。

因此，让我们深入了解一下，详细了解这些技术。

编程语言 Dart vs JavaScript

Flutter使用Dart，而React Native使用JavaScript。

JavaScript

JavaScript是一种非常流行的语言。今天几乎所有的网站都在使用它，它也是一种流行的服务器端编程语言（得益于Node.js）。JavaScript是现代网络的 "语言框架"，为一个巨大的生态系统提供动力。

React Native通过使用一种许多人已经熟悉的语言，建立在这一优势之上。事实上，已经熟悉React的网络开发者可以很容易地学习React Native。

Dart

Dart是在2011年推出的，但在Flutter宣布后才开始流行。Dart发展迅速，根据GitHub的数据，它被列为2019年增长最快的语言。

Dart是一种容易学习的语言，与其他流行的语言如Swift或Kotlin有许多共同特征。如果你已经熟悉其他语言，你可以在几周内成为Dart的生产力。

系统架构

Flutter与React Native的最大区别在于其架构。

Flutter架构

Flutter 架构层。资料来源：Google Trends。Flutter.dev。

Flutter使用自己的渲染引擎，称为Skia。这是用C/C++编写的，为渲染、文本布局等提供低级别的API。当您编写 Flutter 应用程序时，您的代码并不直接调用 Flutter 引擎 API。相反，它使用由Flutter框架提供的一组高级API。

根据设计，Flutter控制着屏幕上绘制的每一个像素。Flutter框架提供了一套丰富的UI组件（称为widget），与iOS和Android上的本地UI控件密切相关。

通过使用Dart，Flutter应用程序可以被编译成快速的本地代码，并在所有设备上流畅地运行。

React原生架构

与Flutter相比，React Native应用程序通过使用原生的iOS和Android UI控件在屏幕上绘制内容。

React Native架构

这是由React Native领域实现的，它与原生平台控件进行交互。

作为一个开发者，你在JavaScript领域编写共享逻辑和UI代码，这两个领域可以通过所谓的JavaScript桥梁相互交流。

这种开放的架构非常灵活，除了Android和iOS之外，还可以针对更多的平台。

但是，对于需要频繁更新用户界面的应用程序来说，JavaScript桥成为性能瓶颈，就像执行动画时的情况。

在实践中，这使得Flutter更适合于构建需要流畅动画的UI重度应用。

React Native社区正在开发一个新的架构，以解决React Native桥的性能问题。这就是所谓的 "TurboModules "功能，你可以在这个页面上了解更多信息。

UI 渲染

Flutter和React Native都可以用来构建看起来和感觉是原生的应用程序，但它们的方式非常不同。

Flutter 小部件

Flutter widgets是iOS和Android上所有UI组件的高保真复制品。

Flutter小部件严格遵循Android上的Material Design准则和iOS上的Cupertino设计规范。因此，Flutter 应用程序在每个平台上看起来和感觉都是原生的，不需要额外的开发者努力。

小工具是用Dart代码创建的，就像您的Flutter应用程序中的其他东西一样。您可以定制现有的小部件，或建立您自己的小部件，并提供一个完全定制的体验，让您的用户感到高兴。

React Native组件

React Native 使用 iOS 和 Android 提供的实际本地组件。

你可以在你的JS代码中直接使用它们，并通过类似CSS的样式表自定义它们的外观。

---

例如，这段代码定义了一个按钮，在按下时显示一个警报。

import React from 'react'; 
  
// Import any required components from react-native 
import { 
    StyleSheet, Button, View, Alert 
} from 'react-native'; 
  
// Function for creating the custom button 
const AlertButton = () => {
    return ( 
        <View style={styles.container}>   
            <Button 
                title="Press Me"
                onPress={() => Alert.alert('Button Pressed')} 
            /> 
        </View> 
    ); 
}

// Button styling
const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        backgroundColor: '#F44336', 
        alignItems: 'center', 
        justifyContent: 'center', 
    }, 
}); 

export default AlertButton;

上面的代码使用了JSX，这是一个JavaScript语法扩展，以类似XML的格式描述用户界面。

---

同样的组件可以在Flutter中定义为一个widget类。

// Import required Material widgets from this file
import 'package:flutter/material.dart';

// Class that defines the custom button
class AlertButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      child: Text('Press me'),
      onPressed: () => showDialog<void>(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Button Pressed'),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () => Navigator.of(context).pop(true),
            ),
          ],
        ),
      ),
    );
  }
}

虽然Flutter和React Native在语法上有很多不同，但两个框架都使用声明式编程风格来构建UI。苹果在2019年推出的SwiftUI也采用了同样的方法。

开发者体验

Flutter和React Native都提供了热重载功能，可以让你改变应用程序的代码并立即看到结果。

这对Flutter和React Native开发者来说是一个巨大的生产力提升，因为在使用原生iOS和Android SDK开发应用程序时，没有热重载功能（尽管SwiftUI现在也提供这个功能）。

除了热重载，Flutter和React Native都可以与最流行的文本编辑器和IDE一起使用。初学者可以使用Dartpad开始使用Flutter，这是一个用于快速制作原型的在线编辑器。类似的工具也可用于React Native。

React Native和Flutter都有广泛的文档，涵盖了你开始使用所需的一切。Flutter甚至有一系列官方的YouTube视频，向您展示如何在实践中使用各种小部件。

社区和生态系统

React Native存在的时间更长，拥有更大的社区。React Native应用开发中的大多数常见问题都已经在StackOverflow上得到了解答。因为React Native是JavaScript生态系统的一部分，更多的帮助是现成的。

同样地，React Native提供了许多库和包来解决最常见的任务。这些都可以通过Node包管理器（NPM）来发现和安装。

npm.js网站（左） -pub.dev网站（右）

虽然Flutter生态系统规模较小，但它正在迅速成长，并拥有一个非常热情的社区。Flutter软件包被列在pub.dev（相当于Dart的NPM）上。与React Native相比，Flutter的发展速度更快，而且拥有更好的维护者支持。

因为这两个生态系统都有很好的文档和非常支持的社区，所以当你开始的时候，你不会感到迷茫。

---

然而，React Native和Flutter在包管理方面都面临一些挑战。

从NPM导入React Native包往往会导致安装数百个依赖项。这是因为核心的React Native包本身并不包括你构建应用程序所需的大部分功能。相互冲突的依赖版本和频繁的破坏性变化使React Native非常容易受到维护和升级问题的影响。

与此相反，Flutter提供了更多开箱即用的功能。你可能会遇到依赖于相应的iOS和Android库的Dart包的依赖性问题。但最近Dart工具的改进使得解决这些问题变得更加容易。

一个更大的问题是，一些基本的Flutter包仍然不成熟，还没有准备好用于生产。这些包括相机输入、视频播放和广告支持。尽管Flutter团队意识到了这一点，并且正在采取措施提高官方软件包的质量。

依赖性和软件包问题是所有跨平台框架的共同问题。当你用Flutter或React Native开始一个新项目时，你应该评估你需要什么包，看看它们是否适合你的应用程序。

构建复杂的应用程序

由于有大量的文档和指南，您可以快速掌握React Native和Flutter。

但是，当你想构建更复杂或非常精巧的应用程序时，学习曲线如何比较？

React Native非常接近于提供高质量的本地用户体验。但在实践中，JavaScript桥可能会导致性能问题，特别是对于需要大量动画或频繁更新UI的应用程序。

Flutter就没有这个问题。事实上，Flutter提供了精心设计的动画API，使其能够轻松实现复杂的动画。

大型应用程序还需要一个强大的状态管理解决方案。流行的状态管理包，如Redux、MobX和Hooks，都可用于Flutter和React Native。

测试

如果您想构建健壮的、可用于生产的应用程序，编写测试是最重要的。

React Native和Flutter都提供编写单元测试的功能。

但React Native没有官方支持编写复杂的UI和集成测试，而是需要其他第三方工具。

当涉及到测试时，Flutter真的很亮眼。你可以用小部件测试来测试你的UI，运行速度非常快，而且也支持集成测试。这使得使用官方Flutter工具创建整个测试套件变得更加容易。

反过来，这大大减少了在多个设备上测试您的Flutter应用程序所需的质量保证（QA）工作。

网络支持

虽然Flutter和React Native一开始都是移动优先的解决方案，但除了Android和iOS之外，它们还可以针对Web。

React Native for Web

React Native本身在很大程度上受到React的启发，React是在网络上构建用户界面的领先JavaScript库。

React Native开发者可以使用React Native for Web将他们的移动应用移植到网络上，共享同一个代码库。

这是一个巨大的胜利，因为同样的业务逻辑可以在所有三个主要平台（iOS、Android和Web）上共享。虽然网络应用没有原生SDK所提供的功能，但React Native for Web对许多类型的应用来说已经足够好了。

Flutter Web

Flutter也宣布在2019年的测试版中支持Web，但它在这个平台上面临一些大的挑战。

第一个是应用程序的大小。当你为网络构建Flutter应用程序时，Dart代码被编译成HTML、CSS和JavaScript代码，可以在浏览器上运行。但由此产生的应用大小可能比普通的网络应用要大得多。

另一个问题是性能。Flutter网络应用遭受滚动性能问题的困扰。Flutter团队一直在努力解决这个问题，最近推出了一个新的网络编译器，使用网络汇编（WASM）。这提高了性能，但也大大增加了应用程序的大小。

仅仅这两个问题就意味着Flutter web还不适合许多种类的web应用。然而，对于一些非常特殊的使用情况，它是一个很好的解决方案。例如，如果你的Flutter应用使用了Firebase这样的后台服务，那么很容易建立一个连接到同一后台的管理网络仪表板。

Flutter的总体目标是在所有主要平台上成为一个统一的UI工具包。除了iOS、安卓和网页，Flutter还可以在macOS、Windows和Linux上使用（截至2020年12月为alpha版本）。

优点和缺点

现在我们已经详细比较了Flutter和React Native，让我们总结一下它们的优点和缺点。

React Native和Flutter的标识

Flutter 优点

• 高质量的UI：从单一代码库构建高质量的iOS和Android应用程序的最佳解决方案
• 外观和感觉：容易采用平台特定的行为和惯例
• 动画：易于实现复杂的动画
• 测试：强大的测试支持意味着QA工作大大减少
• 更快的上市时间：由于热重载和更好的开发者体验
• 文档：伟大而全面的文档

Flutter 的缺点

• Flutter web 应用程序的大小和性能。由于性能和尺寸问题，Flutter web 还不具备生产条件
• 一些不成熟的包：一些重要的包（相机、音频/视频、广告支持）存在突出问题

React Native 优点

• JavaScript：是 JavaScript 生态系统的一部分
• 原生和网络：可以用一个代码库来构建生产就绪的原生和网络应用
• 文档：伟大而全面的文档

React Native的缺点

• 性能：对于具有复杂动画、频繁的UI更新或密集计算的应用来说，并不理想
• 有限的测试支持：只提供基本的单元测试支持
• 维护成本高：这是由于破坏性的变化和太多的依赖性。

何时使用Flutter

使用Flutter，如果。

• 您想从一个代码库中构建一个高质量、移动优先的应用程序。由于热重载和出色的开发人员体验，您可以在创纪录的时间内做到这一点。
• 您想建立一个非常定制的用户界面，或者您有大量的动画。Flutter使伟大的设计更容易转化为代码。

如果你需要网络优先的体验，而且移动端对你的战略不是必不可少的，就不要使用Flutter。

何时使用React Native

使用React Native，如果。

• 你想用一个代码库在移动和网络上构建简单的跨平台应用。
• 你想在iOS和Android上使用本地组件构建应用。
• 你已经熟悉JavaScript和React.js，你不想学习新的语言。

如果你的应用需要定制UI和动画，或者需要定期更新，就不要使用React Native。

结论

Flutter和React Native都被一些大公司用于生产。

两者都是跨平台开发的强大框架。

两者都可以缩短你的移动应用的上市时间。

两者都不是银弹，每个应用程序都有不同的要求。我希望这篇文章能帮助你决定什么是最适合你和你的下一个项目。

如果你刚刚开始，Flutter和React Native都有很好的文档，活跃的社区渠道，以及在线课程。

而且它们学习起来也很有趣!所以为什么不试一试呢？