Flutter vs. React Native -哪个是你下一个应用的最佳选择?

颤振并反应本地是两个最流行的跨平台框架如今的市场专注于手机应用开发等。betwayapp下载安装

在这些框架之前，为iOS和Android构建一个应用程序的工作量增加了两倍。

超过10年，Apple和Google已提供本机工具和SDK，以构建IOS和Android应用程序。一直，开发商必须为不同平台制作不同语言的相同应用．对企业来说，这意味着巨大的成本。随着用户期望值的不断提高，开发者需要投入更多的时间和金钱去创造出能够脱颖而出的应用，这也就意味着公司无法投入宝贵的时间去针对每个平台重新构建自己的应用。

Flutter和React Native改变了这一点，允许开发者用单一代码库编写应用程序，并在多个平台上运行。

而且这两个框架都不是灵丹妙药很多球队都用过减少投放市场的时间为他们的应用程序。

本文提供了浮动与反应原生的深入比较。这将有助于您了解他们的利弊，并澄清何时使用一个或另一个。

颤振与Native反应:起源

由谷歌创建的Flutter于2017年首次公布。React Native起源于Facebook，于2015年开源。

今天都很受欢迎。虽然反应原生更成熟并且具有大社区，但颤动一直在增长速度越来越快，最近超越了搜索趋势和GitHub明星的原产。

因此，让我们深入研究并详细了解这些技术。

编程语言:Dart vs. JavaScript

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

javascript.

JavaScript是一种非常流行的语言。现在几乎所有的网站都在使用它，并且是服务器端编程的主要语言(感谢node . js)．JavaScript是现代网络的“通用语”，为一个庞大的生态系统提供动力。

通过使用许多已经熟悉的语言，对这种强度的反应原生建立。事实上，已经熟悉反应的Web开发人员往往有一段简单的时间学习原生。

飞镖

Dart是在2011年推出的，但直到谷歌宣布推出Flutter之后才开始流行起来。它正在迅速发展，而且根据GitHub.是2019年增长最快的语言。

飞镖是一个易于学习的语言与其他流行语言，如Swift和Kotlin，有许多相似之处。如果您已经熟悉其他语言，那么您可以在几周内使用Dart变得高效。

系统架构

浮动与反应原住民之间的最大区别在于它们的建筑。

颤振的架构

Flutter使用自己的渲染引擎Skia。它是用C/ c++编写的，提供了用于呈现、文本布局等的底层api。当您编写Flutter应用程序时，您的代码不会直接调用Flutter引擎api。相反，它使用Flutter框架提供的一组高级api。

通过设计,Flutter控制用户在屏幕上绘制的每个像素．Flutter框架提供了一组丰富的UI组件(称为小部件)，它们与iOS和Android上的本地用户界面(UI)控件非常匹配。

通过使用Dart，您可以编译Flutter应用程序，使其快速运行在所有设备上。

反应当地建筑

与Flutter不同的是，React Native应用使用原生iOS和Android UI控件在屏幕上绘制内容。

这是由反应本土领域，它与本机平台控件交互。

控件中编写共享逻辑和UI代码JavaScript领域，而这两个领域可以跨越所谓的相互沟通JavaScript桥．

这种开放的架构非常灵活，使其能够瞄准除Android和iOS之外的更多平台。

但是对于需要频繁更新UI的应用程序(如执行动画时)，JavaScript桥变成了性能瓶颈。

在实践中，这使得Flutter更适合于构建需要平滑动画的ui密集型应用。

UI呈现

Flutter和React Native都构建了看起来和感觉上都是原生的应用，但它们以非常不同的方式做到这一点。Flutter应用是用所谓的小部件制作的，而React Native则使用来自iOS和Android的本地组件。

颤振部件

颤振部件高保真副本iOS和Android上的所有UI组件。

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

小部件是用Dart代码创建的，就像您的Flutter应用程序中的其他所有东西一样。您可以自定义现有的小部件，也可以构建自己的小部件，并交付让您的用户满意的完全自定义的体验。

反应本地组件

React Native使用实际的iOS和Android提供的原生组件。

您可以直接在JS代码中使用它们，并使用类似css的样式表定制它们的外观。

例如，这段代码定义了一个按钮，当按下时显示警告:

import React from ' React ';//从react-native Import {StyleSheet, Button, View, Alert};//创建自定义按钮的函数const AlertButton = () =>}>  Alert。alert('Button Pressed')} /> );} //按钮样式const styles = StyleSheet。create({container: {flex: 1, backgroundColor: '#F44336'， alignItems: 'center'， aligncontent: 'center'，}，});出口默认AlertButton;

上面的代码使用JSX，JavaScript语法扩展名以XML的格式描述UI。

同样的组件可以定义为Flutter中的小部件类:

//从此文件导入“包裹：flutter / letame.dart”中导入所需的材料窗口小部件;//定义自定义按钮类alertbutton的类扩展了statelesswidget {@override窗口小部件构建（buildcontext上下文）{return flatbutton（颜色：colors.red，child：text（'按me'），donmettent :(）=> showdialog （上下文：context，builder :(上下文）=> alertdialog（标题：文本（按下'按钮'），操作： [flatputton（child：text（'确定'），donmettent :(）=>导航器。（上下文）.pop（true），），]，），），）;}}

虽然抖动和原生物之间存在许多语法差异，但两个框架都使用a声明性编程风格为构建ui。苹果于2019年推出的swifttui也采用了同样的方法。

开发人员的经验

Flutter和React Native都提供热重新加载特性，允许您更改应用程序的代码并立即看到结果。

这为Flutter和React Native开发人员带来了巨大的生产力提升，正如热重新加载特性一样不是使用原生iOS和Android SDK开发应用时可用(不过SwiftUI现在也提供了这个功能)。

除了热重新加载之外，您还可以在最流行的文本编辑器和ide中同时使用Flutter和React Native。初学者可以开始使用颤振Dartpad，一个用于快速原型制作的在线编辑器;一个类似的工具可用于React Native。

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

社区和生态系统

React Native出现的时间更长，目前拥有比Flutter更大的社区。React Native应用开发中的大多数常见问题都已经得到了解答betwayapp下载安装StackOverflow．因为React Native是JavaScript生态系统的一部分，所以很容易获得帮助。

同样，React Native提供了许多库和包来解决最常见的任务。可以使用节点包管理器（NPM）。

虽然扑振生态系统较小，但它正在迅速扩展，并且具有非常热情的社区。列出了扑动包pub.dev(相当于NPM代表Dart)。Flutter比React Native发展得更快，拥有更好的维护者支持。

因为这两个生态系统都有很棒的文档和非常支持的社区，所以当你开始使用这两个框架时，你都不会感到失落。

包管理

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

原生

从NPM导入React Native包通常会导致安装数百个依赖项。这是因为核心React Native包本身并不包含很多构建应用所需的功能。

相互冲突的依赖版本和频繁的破坏性更改使得React Native非常容易受到维护和升级问题的影响。

颤振

与此相反，扑腾提供了盒子的更多功能。您可能会遇到依赖于相应的IOS和Android库的DART包依赖依赖性问题。但最近的Dart工具改进使得解决这些问题更容易。

一个更大的问题是，一些基本的Flutter软件包仍然不成熟，不能用于生产。其中包括摄像头输入、视频回放和广告支持。Flutter团队意识到这一点，并正在采取措施提高官方软件包的质量。

依赖关系和包问题是所有跨平台框架的共同问题。当你用Flutter或React Native启动一个新项目时，你应该评估你需要哪些软件包，看看它们是否适合你的应用。

构建复杂应用

由于广泛的文档和指南，您可以通过反应本地和颤动快速加速。

但当你想要创造更复杂或更精致的手机应用时，学习曲线又如何呢?

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

扑腾没有这个问题。事实上，Flutter提供精心设计的动画API，可以轻松实现复杂的动画。

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

测试

如果您想构建健壮的、可用于生产的移动应用程序，编写测试是至关重要的。React Native和Flutter都提供了编写单元测试的功能。

颤振在测试中真的很出色。你可以用它来测试你的UI小部件测试运行非常快，并且支持集成测试。这使得使用官方的Flutter工具创建整个测试套件变得更加容易。

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

相比之下，React Native相形见绌，因为它没有编写复杂UI和集成测试的官方支持，而是需要其他第三方工具。

网页支持

虽然Flutter和React Native都是以移动优先的解决方案起步的，但除了Android和iOS外，它们也可以瞄准网页。

React Native for the web

React Native本身就深受启发反应，是用于构建web用户界面的领先JavaScript库。

React本地开发人员可以使用React Native for Web将移动应用程序移植到Web，共享相同的代码库。

这是一个巨大的胜利，因为相同的业务逻辑可以在所有三大平台(iOS, Android和web)上共享。虽然网络应用没有原生sdk提供的功能，但React native for web对许多类型的应用都足够好了。

扑波网

Flutter在2019年宣布了网络支持测试版，但是它在这个平台上面临着一些巨大的挑战。

第一个是应用大小。当您构建一个扑应用程序的web, Dart代码编译成HTML, CSS和JavaScript代码，可以在浏览器上运行。但最终的应用规模可能比普通的网页应用大得多。

另一个问题是性能。颤动的web应用程序遭受滚动性能问题。Flutter团队一直在为此努力工作，最近推出了一种新的使用web Assembly (WASM)的web编译器。这不仅提高了性能，还大大增加了应用的大小。

单单这两个问题就意味着Flutter web还不适合许多类型的web应用。然而，对于一些非常特定的用例，它是一个很好的解决方案。例如，如果您的颤振应用程序使用一个后端服务，如Firebase，它很容易构建一个管理web仪表板连接到相同的后端。

如果要重复使用Web上的飞镖代码，角飞镖是一个可行的挥动网的可行替代品。

Flutter的总体目标是成为所有主要平台上的统一UI工具包。除了iOS, Android和web, Flutter也可以在macOS, Windows和Linux上使用(作为2020年12月的alpha版本)。

优点和缺点的总结

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

颤振的优点

• 高质量的用户界面：从单个代码库构建高质量IOS和Android移动应用的最佳解决方案
• 外观和感觉:易于采用特定于平台的行为和约定
• 动画:易于实现复杂动画
• 测试:强大的测试支持意味着QA工作大大减少
• 更快的上市时间:由于热重新加载功能和更好的开发体验
• 文件:伟大而全面的文件

颤振缺点

• 扑腾Web应用尺寸和性能：由于性能和大小问题，扑颤网不是生产的生产
• 一些不成熟的包:一些重要软件包(摄像头、音频/视频和AD支持)的突出问题

本机优点反应

• javascript.: JavaScript生态系统的一部分
• 本地和网络:可用于构建一个单一代码库的本地和web应用的生产就绪
• 文件:伟大而全面的文件

反应当地缺点

• 性能:不适用于具有复杂动画、频繁UI更新或密集计算的应用
• 有限的测试支持:只提供基本的单元测试支持
• 高维护成本:由于破坏更改和太多依赖

何时使用颤动

用颤振如果:

• 你想建立一个高质量的，尝试应用程序从一个单一的代码库。多亏了热加载和优秀的开发者体验，你可以在创纪录的时间内完成。
• 你想要构建一个非常自定义的UI，或者如果你有很多动画。Flutter使伟大的设计更容易转化为代码。

如果你需要网站第一经验,手机不是必需品你的策略。

何时使用React Native

使用React Native:

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

如果你的应用需要，不要使用React Native自定义UI和动画或者要求定期更新．

结论

Flutter和React Native都是用于跨平台开发的健壮框架，被大公司用于生产，它们都可以缩短你的手机应用的上市时间。betwayapp下载安装

既不是银弹，每个应用都有不同的要求。这意味着在某些情况下，扑除将是最佳选择，而React Native将更好地为其他项目工作。我希望这篇文章有助于您决定最适合您和您的下一个项目。

如果您刚刚入门，扑振并反应本地有很大的文档，有效的社区渠道，以及在线课程．

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