React Native和Flutter有什么区别?

时间:2019-01-28 12:16:54

标签: react-native flutter

React-nativeFlutter从技术上有什么区别?

两种技术似乎都做相对相同的事情,Flutter甚至承认它是从React那里获得灵感的:faq

当它们列出相同的功能并且具有几乎相同的语法(console.log()StatefulWidget类)时,这一点更加明显。

类似于AngularDart是Angular的Dart实现;假设Flutter是React的Dart实现对吗?

4 个答案:

答案 0 :(得分:25)

在架构上,React Native(RN)和Flutter非常相似。

Flutter所谓的“小部件”与React的“组件”严格等效。这就是Flutter说它受React启发的意思。

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

解释过的Javascript VS编译的Dart

Flutter使用Dart,这是一种类型化的语言,可提供“及时”(JIT)和“提前”(AOT)编译(包括摇树)

在开发中,Flutter使用JIT编译来实现热重装。对于生产版本,它使用AOT编译以获得更好的性能。


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

JSX是另一种语言,它可以编译为JS,然后在运行时进行评估。

桥接到本地VS完成重写

React native是在Native的顶部构建的。

在React Native中使用按钮或文本时,您正在操纵用于本机Android / iOS应用程序的官方对象。

我们可以考虑将React作为Android / iOS之间的一种通用语言来声明布局-但从根本上说,应用程序有所不同,可能存在不一致之处。

这不是 true 跨平台。但是同时,它允许与本机元素更好的互操作性。


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

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

它具有一些含义:

  • 所有UI逻辑都必须由Flutter重新实现。无论是滚动,触摸事件,动画,...
  • 该应用程序完全用Dart编写,甚至深入到底层。这意味着无论平台是什么,执行的代码始终相同。
  • 可能所有可以运行Dart代码并创建窗口的东西都可以运行Flutter,并且应用程序应该几乎没有变化即可工作。因此,Web正在进行中(Hummingbird),并且可以使用台式机的基本支持。

在某种程度上,我们可以将Flutter与Webview /游戏引擎进行比较,但针对休闲应用进行了优化。

答案 1 :(得分:22)

Remi已经有几个优点。我还有一个。

解释了网桥-相对于本机,没有网桥

尽管顾名思义,React Native应用程序编译为本地代码。 React Native应用程序在运行时解释Javascript代码,React Native应用程序中的组件更新通过桥到达本机视图副本。这可能会使速度变慢,并成为瓶颈。

相反,Flutter应用程序(处于发布模式)已编译为本地代码,并且不需要桥接来操作UI。至少从理论上讲,这反过来会提高性能-无需往返于 native land 即可进行简单的UI更改。更不用说Flutter版本代码是本地编译的,并且不涉及任何解释程序。

跳舞的猴子,跳舞

现在我们知道发布模式Flutter应用程序没有解释程序,也不需要UI操纵的桥梁,让我们首先看看这两个东西到底是什么。

我们将通过一个高度假设的示例应用程序来完成此操作。我们的React Native应用程序具有一个在屏幕上使猴子跳舞的按钮。在React Native中,我们的按钮和跳舞的猴子组件是用Javascript和React编写的。

口译员

由于Javascript不是Android或iOS上的一流语言,因此您的React Native应用程序包括 Javascript解释器,它可以在运行时解释您的Javascript代码强>。没有解释器,您将根本无法使用Javascript编写应用程序-即使是简单的console.log('Hello World!')也无法使用。

根据React Native docs,在“大多数情况下” 中,将使用JavascriptCore解释Javascript代码。

桥梁

在后台,React Native使用本地Android Views和iOS UIViews在屏幕上显示UI组件(例如跳舞的猴子)。但是,由于Android和iOS SDK的UI部分不使用Javascript,因此您不能仅通过使用Javascript来使猴子跳舞。

这是桥梁发挥作用的地方。在桥的另一边是用Javascript编写的React Native组件和逻辑。在另一侧,我们有主机Android / iOS应用程序,可将本机视图呈现到屏幕中。 从现在开始,我们将桥的两侧称为 JavaScript地域原生地域

因此,当用户点击我们的“跳舞,猴子,跳舞”时会发生什么?按钮?

  1. 本机Android / iOS视图发送onclick事件,该事件通过桥梁到达 JavaScript地域
  2. 我们用Java语言编写的onclick监听器被调用。这是一个简单的调用,可在组件内部切换布尔值。与setState(() {isMonkeyDancing = true})相似的事物。
  3. React看到某些更改。它带有更新的 UI元素表示形式,其中包含跳舞的猴子。该表示形式只是一棵纯Javascript对象树,用于描述UI的更新状态。
  4. Javascript对象树被序列化并通过网桥发送到本地
  5. 主机应用程序接收序列化的对象树并将其反序列化。现在,它可以更新本机Android / iOS视图,以匹配反序列化的UI表示形式。我们的猴子现在在跳舞,我们的用户永远快乐。

因此,在此示例中,只需单击一次按钮就可以跨过桥梁两次。

实际上,它是三个-最初只是简单地呈现一个按钮就是跨网桥本身的调用。 在一个不仅只有一个按钮和一只猴子跳舞的应用中,您可能会更多。而且每次执行操作时,都需要序列化数据并将其从一侧发送到另一侧。

这比仅提供UI表示并直接直接更新UI 要慢。此外,与提前编译代码相比,在运行时解释Javascript会有代价。

底线

由于Flutter本质上是便携式渲染引擎,因此Flutter 不需要桥来进行UI更新。因此,至少在理论上,UI更新更快。这就是为什么使用Flutter相较于React Native而言,使用复杂的动画或类似FlareSpriteWidget甚至游戏的应用来构建应用程序会更加有利可图。

而且由于Flutter处于发布模式,是AOT编译的,因此Flutter也不需要解释器。那就是Flutter和React Native之间的区别。

答案 2 :(得分:2)

Flutter vs React Native:开发人员的视角

Facebook的

React Native和Google的Flutter –两种热门的跨平台应用程序开发技术引起了轰动。在这篇文章中,我们将从开发人员的角度对两者进行详细比较。

什么是Flutter和React Native?

React Native是Facebook内部在2015年开源的一个项目。另一方面,Flutter是Google自2017年I / O以来一直大力推广的项目。这两种技术都可以帮助应用程序开发人员使用一种编程语言来更快地构建跨平台应用程序。 React Native已经是一个成熟的工具并且拥有庞大的社区,但是Flutter自2017年以来也开始看到巨大的采用率。在这篇文章中,我们将使用十个标准对它们进行比较:

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

编程语言

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

  • 原生本机-JavaScript
  • Flutter —飞镖

安装

安装方法应该简单明了,没有太多复杂的步骤,以便刚开始使用它的开发人员可以轻松地学习。

  • 反应原生-NPM
  • Flutter-二进制从源下载

UI组件和开发API

  • 反应原生-更少组件
  • Flutter-组件丰富

结论

React Native和Flutter都有其优点和缺点。一些行业专家已经预测Flutter是移动应用程序开发的未来。考虑到上面的比较,很明显Flutter进入了跨平台移动开发大赛。让我们不要预测未来,而要拭目以待!

答案 3 :(得分:0)

如果您深入学习这两种技术。因此,您会发现很大的不同:

  1. 编程语言-Java Script和Dart
  2. 技术架构-Flex和Skia。
  3. UI组件和开发API:控件杂乱无章,但视图在React native中。
  4. 开发人员的生产力:在Flutter中调试非常容易。
  5. 社区:React Native中的大型社区支持。
  6. 文档和工具包:Flutter团队为所有小部件创建了简单的duc。
  7. 测试支持:Flutter提供测试库。
  8. DevOps和CI / CD:Flutter提供CI / CD支持。

React Native and Flutter that you can read her之间的区别更大。

相关问题