React Native和Flutter有什么区别？

Question

React-native和Flutter技术上有什么区别？

两种技术似乎都做了相同的事情,Flutter甚至承认它从React:faq中获取灵感

当它们列出相同的功能并具有几乎相同的语法(StatefulWidgetvs Componentclass)时,这一点就更加明显了.

类似于AngularDart是Angular的Dart实现; 假设Flutter是React的Dart实现是正确的吗？

Answer 1

在结构上,React Native(RN)和Flutter非常相似.

Flutter称之为"Widget"的东西严格等同于React的"Component".这就是当Flutter从React那里得到启发时的意思.

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

解释Javascript VS Compiled Dart

Flutter使用Dart,这是一种类型语言,提供"及时"(JIT)和"提前"(AOT)编译(包含树木抖动)

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

React-Native使用一些名为JSX的语法糖增强的Javascript.

JSX是一种不同的语言,它编译为JS,然后在运行时进行评估.

桥接到原生VS完全重写

React native建立在native之上.

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

我们可以将React视为Android/iOS之间的通用语言来声明布局 - 但从根本上说,应用程序与潜在的不一致性有所不同.

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

颤动恰恰相反.Flutter的目标是尽可能少地使用原生元素.

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

它有一些含义:

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

在某种程度上,我们可以将Flutter与webview /游戏引擎进行比较,但针对临时应用进行了优化.

Answer 2

雷米已经有几个好点.我还有一个.

解释桥梁 - 与原生和没有桥梁

尽管名称可能暗示,React Native应用程序不会编译为本机代码.React Native应用程序在运行时解释Javascript代码,React Native应用程序中的组件更新通过桥接到本机视图对应项.这可能会使事情变得缓慢并成为瓶颈.

相反,Flutter应用程序(在发布模式下)被编译为本机代码,并且不需要桥接来操作UI.反过来,至少在理论上,这将是更高效的 - 没有必要往原生地进行往返以进行简单的UI更改.更不用说发布Flutter代码是本地编译的,并且不涉及解释器.

跳舞猴子,跳舞

现在我们知道发布模式Flutter应用程序没有解释器或者需要桥接来进行UI操作,让我们先看看这两件事实际上是什么.

我们将使用一个非常假设的示例应用程序执行此操作.我们的React Native应用程序有一个按钮,可以让猴子在屏幕上跳舞.在React Native中,我们的按钮和跳舞的猴子组件是用Javascript和React编写的.

口译

由于Javascript不是Android或iOS上的第一类语言,因此您的React Native应用程序包含一个Javascript解释器,可在运行时解释您的Javascript代码.如果没有解释器,您将无法使用Javascript编写应用程序 - 即使是简单的也不行.console.log('Hello World!')

根据React Native文档,在"大多数情况下",Javascript代码将使用JavascriptCore进行解释.

桥梁

在引擎盖下,React Native使用原生Android视图和iOS UIViews在屏幕上显示UI组件(例如跳舞的猴子).但由于Android和iOS SDK的UI部分不使用Javascript,因此无法单独使用Javascript来制作猴子舞蹈.

这是桥梁发挥作用的地方.在桥的另一边是你的React Native组件和逻辑,用Javascript编写.另一方面,我们有主机Android/iOS应用程序,可以将原生视图渲染到屏幕上.从现在开始,让我们把桥的两边称为Javascript土地和本土.

那么,当用户点击我们的"舞蹈,猴子,舞蹈!"时会发生什么.按钮？

1. 本机Android/iOS视图调度onclick事件,该事件通过桥接到Javascript域.
2. 我们用Javascript编写的onclick监听器被调用.这是一个简单的调用,可以在组件内切换布尔值.沿线setState(() {isMonkeyDancing = true})或类似的东西.
3. React发现事情发生了变化.它提供了具有跳舞猴子的UI元素的更新表示.表示只是一个简单的Javascript对象树,它描述了UI的更新状态.
4. Javascript对象树被序列化并通过桥接器发送到本地.
5. 主机应用程序接收序列化对象树并对其进行反序列化.现在,它可以更新本机Android/iOS视图以匹配反序列化的UI表示.我们的猴子现在正在跳舞,我们的用户永远幸福.

因此,在此示例中,需要单击一次按钮才能通过桥两次.

实际上,它只有三个 - 只是简单地渲染按钮最初是跨越桥本身的一个调用.在一个不仅仅是一个按钮和一个跳舞的猴子的应用程序中,你可能会更多地过桥.每次执行此操作时,都需要序列化数据并将数据从一端发送到另一端.

这不仅仅是想出的UI代表性和更慢的更新UI与直接.此外,与提前编译代码相比,在运行时解释Javascript的成本也是如此.

底线

由于Flutter本质上是一个可移植的渲染引擎,因此Flutter 不需要桥接来进行UI更新.因此,至少在理论上,UI更新速度更快.这就是为什么使用Flutter 构建具有复杂动画或Flare,SpriteWidget甚至游戏等应用程序的应用程序与React Native相比更有利可图的原因之一.

因为Flutter在发布模式下是AOT编译的,所以Flutter也不需要解释器.这就是Flutter和React Native之间的区别.