结构上,反应自然(RN)和颤振非常相似。

flutter称之为“小部件”,严格等同于react的“组件”。这就是颤振的意思,当它说它的灵感来自反应。

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

解释的javascript与编译的dart

flutter使用dart,这是一种类型化语言,它提供“及时”(jit)和“提前”(aot)编译(包括树抖动)。

在开发中,flutter使用JIT编译来支持热重载。对于生产构建,它使用AOT编译以获得更好的性能。

react native使用一些语法糖(称为jsx)增强的javascript。

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

桥接到本机vs完全重写

生成react native 在本地人之上 .

在react native中使用按钮或文本时,您操作的是用于本机Android/iOS应用程序的官方对象。

我们可以考虑将react作为Android/iOS之间的一种通用语言来声明布局,但从根本上说,应用程序与潜在的不一致性是不同的。

它不是 真 跨平台。但同时,它允许更好地与本机元素进行互操作。

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

颤动请求到OS窗口,然后使用DART和Skia(它是C++图形引擎)完全管理它的内容。

它有几个含义:

• 所有的用户界面逻辑都必须通过flutter重新实现。无论是滚动、触摸事件、动画……
• 应用程序完全是用DART编写的,甚至深入到较低的层中。这意味着无论平台是什么,执行的代码总是相同的。
• 任何可能运行DART代码和创建窗口的东西都可以运行flutter,应用程序应该可以在几乎没有变化的情况下工作。因此,网络正在进行中( Hummingbird )提供台式机的基本支持。

在某种程度上,我们可以将flutter与WebView/Game引擎进行比较,但针对临时应用进行了优化。

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

用桥解释-与本地和无桥比较

尽管名字可能意味着什么,但react本机应用程序 不 编译为本机代码。响应本地应用程序解释JavaScript代码 运行期间 和本地应用程序go中的组件更新 穿过一座桥 与本地视图对应。这可能会使事情慢一点,成为瓶颈。

相反,颤振应用程序(在释放模式下)是 编译为本机代码 和 不需要搭桥 用于操作用户界面。这反过来,至少在理论上,会更有成效——没有必要去 故土 进行简单的用户界面更改。更不用说,释放颤振代码是本地编译的,不涉及任何解释程序。

跳舞猴子,跳舞

既然我们知道发布模式flutter应用程序没有解释器,也不需要用户界面操作的桥梁,那么首先让我们看看这两个东西实际上是什么。

我们将使用一个高度假设的示例应用程序来实现这一点。我们的React原生应用程序有一个按钮,可以让猴子在屏幕上跳舞。在react native中,我们的按钮和跳舞猴子组件是用javascript和react编写的。

口译员

由于javascript不是Android或iOS上的一流语言,因此您的React Native应用程序包括 javascript解释器 那个 解释 您的javascript代码 在运行时 . 如果没有解释器,你根本就无法用javascript编写应用程序——即使是一个简单的 console.log('Hello World!') 不会起作用的。

根据 React Native docs 在 “多数情况” ,将使用javascriptcore解释javascript代码。

桥梁

在引擎盖下,React Native使用本机Android视图和iOS ui视图在屏幕上显示ui组件(如跳舞的猴子)。但是,由于Android和iOSSDK的用户界面部分不使用javascript,因此不能仅使用javascript就让猴子跳舞。

这里就是 桥梁 开始发挥作用。桥的另一边是用JavaScript编写的反应本地组件和逻辑。另一方面,我们有主机Android/iOS应用程序,可以将本地视图呈现到屏幕中。 从现在开始,我们把桥的两边称为 JavaScript土地 以及 故土 .

所以,当用户点击我们的“舞蹈,猴子,舞蹈”时会发生什么?按钮?

1. 本机Android/iOS视图 发送onclick事件 哪一个 过桥 到 JavaScript土地 .
2. 我们用javascript编写的onclick侦听器被调用。这是一个简单的调用,用于切换组件内部的布尔值。有点像 setState(() {isMonkeyDancing = true}) 或类似的。
3. 反应发现有些东西已经改变了。它提出了一个更新的 UI元素的表示 有只跳舞的猴子。这个表示只是一个简单的javascript对象树,描述了用户界面的更新状态。
4. javascript对象树获取 序列化并通过桥发送 到 故土 .
5. 宿主应用程序接收序列化对象树并对其进行反序列化。现在它可以将本机Android/iOS视图更新为 匹配反序列化的UI表示形式 . 我们的猴子现在在跳舞,我们的用户永远快乐。

所以在这个例子中,只需点击一个按钮,就可以通过两次桥。

实际上,它是三个——只是简单地呈现一个按钮最初是一个跨越桥本身的调用。 在一个不仅仅是一个按钮和一只跳舞的猴子的应用程序中,你很可能会跨过这座桥。 更多 . 每次这样做,都需要对数据进行序列化,并将其从一端发送到另一端。

这比使用UI表示要慢,而且 更新用户界面 用那个 直接地 . 此外,与提前编译代码相比,在运行时解释JavaScript需要付出一定的成本。

底线

因为颤振本质上是一个便携式渲染引擎,颤振 不需要过桥 进行用户界面更新。因此,至少在理论上,用户界面更新更快。这就是为什么构建具有复杂动画或类似内容的应用程序的原因之一 Flare , SpriteWidget 或者,与本地游戏相比,使用flutter游戏会更赚钱。

而且因为释放模式下的颤振是AOT编译的,颤振也不需要解释程序。这就是颤振和反应固有的区别。