Svelte是一个编译器，而React使用虚拟DOM
React和Svelte都提供了类似的基于组件的体系结构—这意味着它们都支持CDD自下而上的开发，并且都可以通过Bit（Github）之类的工具和平台在应用程序之间共享其组件。
它们之间的重大区别在于，Svelte是一个编译器，可在构建期间将您的应用程序转换为理想的JavaScript，而React在运行时使用虚拟DOM来解释应用程序代码。是的，这是很多术语，让我分解一下。
Svelte vs.React
React使用称为虚拟DOM（VDOM）的概念，其中UI的虚拟表示形式保存在内存中，并通过称为对帐的过程与真实DOM同步。协调过程将发现虚拟DOM（内存中的对象，我们将最新更新推送到UI）与真实DOM（持有先前呈现的UI的DOM）之间的差异（差异）。它使用特定的启发式算法来决定如何更新UI。该过程在大多数情况下是快速，可靠且反应迅速的。双关意😄。
为了实现这一目标，React捆绑了一定数量的开销代码，这些开销代码将在浏览器的JS引擎中运行，以基于各种用户交互来监视和更新DOM。
Svelte编译器
Svelte纯粹是一个编译器，当您构建用于生产的应用程序时，它将您的应用程序转换为理想的JavaScript代码。这意味着当您的应用程序正在运行以更新DOM时，它不会注入任何在浏览器中运行的开销代码。
与通常利用虚拟DOM的React相比，该方法相对较新。
Svelte优点
- 与React甚至其他框架相比，构建时间非常快。使用汇总插件作为捆绑程序可能是这里的秘密。
- 与React相比，压缩后的包大小更小，更小，这是一个巨大的优点。即使使用我构建的购物车应用程序，初始加载时间和呈现UI的时间也非常短，只有我添加的大块图像需要一些时间:)。
- 绑定类和变量相对容易，并且在绑定类时不需要自定义逻辑。
- <style>在组件本身内对CSS 进行范围界定可以实现灵活的样式。
- 与其他框架相比，Svelte的重要组成部分是纯JavaScript，HTML和CSS，因此更易于理解和入门。
- 与React的上下文API相比，商店实现更直接，授予的上下文API提供了更多功能，Svelte对于常见场景而言可能足够简单。
Svelte缺点
- Svelte不会听参考更新和数组变化的消息，这真是令人讨厌，开发人员需要积极注意这一点，并确保重新分配数组，以便更新UI。
- DOM事件的使用样式也可能令人讨厌，因为我们需要遵循Svelte的特定语法，而不是使用预定义的JS语法。无法onClick在React中直接使用like，而是必须使用特殊语法，例如on:click。
- Svelte是一个新的框架，几乎没有社区支持，因此不支持繁重的生产应用程序可能需要的各种插件和集成。在这里，React是强大的竞争者。
- 没有其他改进。Ex-Ressuspense主动控制您的代码及其运行方式，并尝试在DOM更新时进行优化，有时甚至在等待数据时提供自动加载微调器。这些额外的功能和持续的改进在Svelte中相对较低。
- 一些开发人员可能不喜欢在模板中使用诸如#if和这样的特殊语法#each，而是希望使用React允许的纯JavaScript。这可能取决于个人喜好。
结论
与React相比，Svelte惊人的快速构建时间和极小的捆绑尺寸非常吸引人，特别是对于小型日常应用。然而，增强的功能（上下文API，暂挂等），社区支持，广泛的插件和集成以及某些语法简化的确使React更具吸引力。
好吧，与React相比，Svelte确实在某些功能上提供了明显的改进。但是它可能仍然不足够大或者不能完全取代React。React仍然很强大并且被广泛采用。斯维尔特有很多工作要做。但是从概念上讲，Svelte采取的编译方法已经证明，虚拟DOM差异并不是构建快速反应性应用程序的唯一方法，并且足够好的编译器可以很好地完成相同的工作。
在权衡利弊时，我认为，如果您要构建一个小型应用程序（例如，用于启动的简单电子商务应用程序），则建议使用Svelte。如果您对JS，HTML和CSS有很好的了解，则更容易掌握Svelte。您还可以使用Svelte构建一些功能强大的快速轻量级应用程序。
对于需要多个集成和特定插件的大型生产应用程序，那么React也许仍然是可行之路。再说一次，就像React提供Next.js一样，Svelte还提供了名为Sapper的生产就绪单页应用程序框架，可能值得研究。
这两个竞争者都是构建出色的用户界面的实用而有效的工具。到目前为止，在这两者之间进行选择主要取决于您的方案和首选项。正如我上面提到的，要宣布一位获胜者是一项挑战，因为他们俩都为实现自己的主要目标而表现出色。
网友评论