我最近学习了Svelte,并学会了如何建立一个简单的购物车应用。此外,我忍不住注意到它具有React的许多相似之处。令人惊讶的是,看到竞争者的竞争者有多令人惊讶,它可以是建立用户界面的最受欢迎的JavaScript库之一。在本文中,我将比较Svelte与对React以及它们在幕后彼此的技术。

> Image by Iván Tamás from Pixabay

Svelte是一个编译器,而React使用Virtual DOM

react和svelte,两者都提供了类似的基于组件的架构 - 这意味着都能启用CDD自下而上的开发,并且都能在应用程序和平台(GitHub)之间的工具和平台之间共享它们的组件。

> Example: React components shared on Bit.dev using Bit

它们之间的显着差异是Svelte是一个编译器,它在构建时间期间将应用程序转换为理想的JavaScript,而不是像React,使用虚拟DOM在运行时解释应用程序代码。是的,这是一个很复杂的术语,让我一探究竟。

> Svelte vs. React Behind the Scenes

React虚拟DOM

React使用称为Virtual DOM(VDOM)的概念,其中UI的虚拟表示保存在内存中,并通过名为reconciliation的过程与真实DOM同步。reconciliation进程将在虚拟DOM(内存中的对象之间找到差异,其中我们将最新更新推送到UI)和Real DOM(DOM包含先前呈现的UI)。使用特定启发式算法,它决定如何更新UI。这一过程大多是快速,可靠,无可比拟的反应性。双关语意图。

为实现此目的,React捆绑一定数量的架空代码,该代码将在浏览器的JS引擎中运行,以根据各种用户交互监视和更新DOM。

Svelte编译器

Svelte纯粹是一个编译器,当您构建生产应用程序时,将应用程序转换为理想的JavaScript代码。意味着当应用程序运行以更新DOM时,它不会注入任何架空代码以在浏览器中运行。

与React相比,这种方法相对较新,这通常利用虚拟DOM。

Svelte强势的地方

让我们了解我们可以使用Svelte获得的主要优点是什么。

  • 与React甚至其他框架相比,古剑时间快速。汇总插件的用法作为捆绑程序可能是这里的秘密。

  • 与React相比,打包尺寸较小,这是一个巨大的加分点。即使使用我构建的购物车应用程序,初始加载时间和持续时间呈现UI非常低,只有我添加的图像只需要一些时间:)。

  • 绑定类和变量相对容易,并且在绑定类时不需要自定义逻辑。

  • 在组件本身内的范围CSS

  • 允许灵活的样式。

  • 与其他框架相比,更容易理解并开始入门,因为Svelte的重要部分是普通的JavaScript,HTML和CSS。

  • 与React的上下文API相比,更直接的状态实现,授予上下文API提供了更多功能,并且Svelte可能足够简单以进行常见方案。

Svelte落后的地方

让我们了解Svelte有缺点的地方。

  • Svelte不会侦听参考更新和阵列变化,这是一个bummer,开发人员需要积极寻找此问题,并确保重新分配阵列,以便更新UI。

  • DOM事件的使用风格也可能很烦人,因为我们需要遵循Svelte的特定语法而不是使用预定义的JS语法。不能直接使用像React中的onclick,而是必须使用特殊语法,例如:on:click。

  • Svelte是一个新的社区支持的新框架,从而不支持繁重的生产应用可能需要的广泛插件和集成。反应是这里有强大的竞争者。

  • 没有额外的改进。积极控制您的代码以及它如何运行和尝试在更新DOM时优化,并且有时甚至在等待数据时提供自动加载旋转器。这些额外的功能和持续的改进在Svelte中相对较低。

  • 某些开发人员可能无法使用其模板中的特殊语法,例如#IF和#ECHEACH,而是希望使用纯粹的JavaScript,这是允许的。这可能会归结为个人喜好。

结论

与React相比,Svelte的快速构建时间和微小的打包尺寸非常有吸引力,特别是对于小日常应用。然而,增强的功能(上下文API,悬疑等),社区支持,广泛的插件和集成以及某些语法简化确实渲染也有吸引力。

svelte比react更好,反之亦然?

嗯,与react相比,Svelte确实在某些特征中提供了明显的改进。但它可能仍然没有重要或强大到足以完全取代react。React仍然坚固且广泛采用。Svelte有很多追赶。但是,概念明智,Svelte采取的编译方法证明了虚拟DOM的差异不是构建快速应用的唯一方法,并且足够好的编译器可以获得与它获得的相同的工作。

那么您应该使用哪种框架用于您的下一个应用程序?

在我看来,在我看来,如果你正在构建一个小应用程序,就像一个简单的电子商务应用程序,就推荐Svelte。如果您对JS,HTML和CSS有了很好的了解,它更容易掌握Svelte。您还可以使用Svelte构建一些功能强大的快速和轻量级应用程序。

对于需要多个集成和特定插件的巨大生产应用程序,那么可能是react仍然可能是最好的方式。然后,很多就像React提供了Next.js,Svelte还提供了它的制作准备的单页应用程序框架,称为Sapper,这可能值得研究。

两位竞争者都是建立辉煌的用户界面的实用和有效的工具。截至现在的两者之间的选择主要是基于您的场景和偏好。正如我上面提到的那样,宣布一个获胜者挑战,因为它们都表现得很精心,以实现他们的主要目标。

我希望这篇文章能够快速比较React和Svelte。决定哪个库选择您的下一个应用程序会有所帮助。干杯!

本文由闻数起舞翻译自Keshav Kumaresan的文章《React vs. Svelte: The War Between Virtual and Real DOM》,转载请注明出处,原文链接:

https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9