Svelte vs React: 功能、性能及其他方面区别对比

在目前的 *** 开发生态系统中，是几乎每个都在使用的东西，以使他们的开发过程更容易、更有成效。但是，随着我们使用的技术不断改进，框架也在不断发展，更好、更简单、有时甚至更复杂的框架被发布。

有了这么多的选择，要选择一个更好的框架来满足你的需求就变得非常困难。

在这篇文章中，我们将讨论目前更大的两个JavaScript框架：Svelte与React。我们将正面比较它们，并列出每个框架的优点和缺点，以帮助你选择其中之一。

什么是Svelte?

Svelte是一个用于构建快速、灵活和 *** 化的 *** 应用的框架。它也被称为 “” 和 ““，在GitHub仓库中拥有超过60,000颗星。

Svelte应用程序和组件是在.svelte文件中定义的，这些文件是用类似于 *** X的模板语法扩展的HTML文件。

历史

Svelte起源于，它是由Svelte的创建者自己开发的。Rich Harris。Svelte的设计是为了继承Ractive。2016年发布的Svelte的之一个版本基本上是Ractive，但有一个编译器。

Svelte “这个名字是由Rich Harris和他在《卫报》的同事们选择的。随着时间的推移，越来越多的开发者开始了解Svelte并对其产生兴趣。到2019年，Svelte已经成为一个成熟的工具，可以构建具有支持的开箱即用的Web应用程序。

*** 框架于2020年公布，并在2021年进入测试阶段。

主要特点

Svelte是构建用户界面的一种激进的新 *** 。像React和Vue这样的传统框架在浏览器中完成了大部分工作，而Svelte将这些工作转移到了编译步骤中，在你构建应用程序时发生。

Svelte在构建时将你的应用转换为理想的JavaScript，而不是在运行时解释你的应用代码。这意味着你不需要支付框架抽象的性能成本，也不会在你的应用之一次加载时产生惩罚。

你可以用Svelte构建你的整个应用，也可以将其逐步添加到现有代码库中。你也可以将组件作为独立的包，在任何地方工作，而不需要依赖传统框架的开销。

Svelte的优点和缺点

与任何框架一样，Svelte既有好处也有坏处。在投身于Svelte与React的竞争之前，了解其全貌是很重要的。

让我们来看看Svelte为开发者提供的优点和缺点。

Svelte的优点

以下是使用Svelte的一些主要优点：

• 没有虚拟DOM：Svelte是一个编译器，不使用虚拟DOM，Svelte是一个编译器，在构建时就知道你的应用程序中的东西可能会发生变化，而不是等待在运行时做这些工作。这是Svelte相对于其他任何Web框架的一个非常重要的优势。
• 更少的模板：减少你必须编写的代码量是Svelte的一个明确目标。Svelte帮助你以最小的代价构建用户界面，通过实现更好的反应性、绑定和顶层元素等，提高了代码的可读性，我们将在本文后面讨论这些问题。
• 真正的响应性：Svelte本身就是一种语言，并且默认启用了响应性。不需要特别的代码行来使你的代码具有响应性，你声明的每个变量都是默认的响应性。Svelte还支持派生声明和在状态变化时进行计算的语句。
• 更容易学习：Svelte提供了一种混合语言，由vanilla HTML、CSS和JavaScript/TypeScript组成。不需要学习新的概念或像J *** X那样的特殊语法来学习，这使得它更容易学习。Svelte的文档非常容易理解，并有详细的内置教程。

Svelte的缺点

这些是使用Svelte的主要缺点：

• 生态系统相对较小：作为一个新的框架，与React等框架相比，Svelte还没有一个非常大的生态系统，这意味着你不会像React那样找到很多与Svelte相关的库和工具。
• 独特的用户体验：尽管Svelte使用HTML、CSS和JavaScript/TypeScript，但它引入了独特的元素，与大多数其他框架的工作方式不同。如果你已经习惯了 *** X，并试图转向Svelte，你可能会发现一些奇怪的现象，比如导出关键词的使用方式不同，以及使用 on:click 而不是 onClick。

什么是React？

是JavaScript生态系统中最早和最古老的 *** 框架之一，是当今的 *** 框架。它提供了一种轻松有效地 *** 交互式UI的 *** 。

React利用 *** X来创建应用程序，并有大量的库围绕它而建，这使它成为一个非常可靠的框架。

历史

React由公司于2013年创建，是为各种网站创建动态界面的工具。虚拟DOM，即用React组件构建的DOM元素的代表，是React的基础。

从那时起，它已经发展到包括大量的新功能，使整个JavaScript社区的 *** 开发更容易。

主要特点

现在你对React有了一个很好的了解，让我们来看看使它如此受欢迎的一些关键功能。

*** X

React的开发理念是：渲染逻辑应该与其他UI逻辑（事件、状态管理）结合起来，并且应该一起管理。出于这个原因，React使用 *** X（JavaScript XML），而不是将技术分开（HTML和JavaScript分为独立的文件）。 使用 *** X，你可以在JavaScript中编写标记，为你提供了一种超级能力，可以在一个.jsx文件中编写组件的逻辑和标记。

基于组件的

在React中，我们建立封装的组件，管理它们自己的状态，然后将它们组合起来，形成复杂的UI。由于组件的逻辑是用JavaScript写的，而不是用模板写的，所以我们可以很容易地通过我们的应用程序传递丰富的数据，并保持状态不在DOM中。

声明性

React使创建交互式UI变得不费力。我们可以为我们的应用程序中的每个状态设计简单的视图，当我们的数据发生变化时，React会有效地更新和渲染正确的组件。

React的优点和缺点

React和Svelte一样，都有一些优点和缺点，在选择它作为你的框架之前，你应该注意到这些缺点。

React的优点

以下是使用React的更大好处：

• 代码可重用性：React利用组件进行开发，这些组件大多是可重复使用的，可以根据我们的需要使用道具进行修改。
• 高效的SEO优化： 一般来说，搜索引擎在阅读重度JavaScript应用程序时有困难。React克服了这个问题，这对开发者在各种搜索引擎上轻松导航是有帮助的。React应用程序可以在服务器上运行，虚拟DOM将被渲染并作为一个普通页面返回给浏览器。
• 庞大的生态系统：作为最古老的 *** 框架之一，与较新的框架相比，React有一个非常大的生态系统。这意味着有很多资源可供React用户使用，同时还有很多与开发有关的帮助。
• 库：由于React有一个庞大的生态系统，这也意味着有很多开发者围绕React构建工具和库。这个社区不断地发布很棒的项目，这些项目被数百万React开发者定期使用。

React的缺点

React的一些缺点包括：

• 困难的学习曲线：正如我们前面所看到的，React使用了 *** X–一种非常新的技术，是为刚刚开始使用React的新开发者而 *** 的。许多开发者不喜欢使用 *** X，因为它的学习曲线比较陡峭，比较困难。
• 作为一个库的局限性：React是一个库，而不是一个真正的 *** 框架，这意味着它没有预先包装好必要的功能和开箱即用的重要开发工具。此外，这使应用程序面临安全和一致性问题，开发人员需要依靠外部库的连续性来确保他们的React应用程序在任何时候都能正常运行。
• 糟糕的文档：React没有适当的文档，因为React环境中不断有更新，可能会变得难以追踪。正因为如此，对于初学者来说，要想开始使用React是很困难的。

Svelte与React对比

现在我们知道了这两个 *** 框架的基本特征、优点和缺点，我们可以对它们进行比较，以得出结论，哪一个更好，你应该使用哪一个。

受欢迎程度

说到受欢迎程度，现在没有其他框架能超过React。截至 2023 年，React 依然是更受欢迎的 Web 框架工具，与 Svelte 相比，这是相当合理的，因为 React 自2013年以来一直在 JavaScript 生态系统中存在，使其比 Svelte 这样的新开发的框架更有优势。

React 在该领域占据主导地位，在使用和采用方面领先于其他框架。事实上， 调查发现，84% 的开发人员使用 React，这证明了它的受欢迎程度和有效性。

也显示，许多 *** 开发人员都使用 React。这种广泛采用带来了广泛的支持 *** 和许多工作机会。

Svelte 没有那么多用户，使用它。不过，它的增长速度很快。

调查发现，20% 的 JavaScript 开发人员现在使用 Svelte，68% 的用户希望学习它，这表明人们对它的兴趣越来越大。未来几年，除非有更好的选择发布，否则 Svelte 可能会成为一个主要框架。就目前而言，开发人员非常欣赏它的简洁、快速和较小的捆绑大小。

可伸缩性和可扩展性

Svelte和React都是可扩展且稳定的面向生产的框架。但是当涉及到可扩展性时，React可能比Svelte更有优势，这要归功于它庞大的生态系统和围绕它工作的社区。

正如我们在上面看到的，有大量的外部库和工具为React而生，这使得React比Svelte及其相对较小的生态系统更具可扩展性。

速度和性能

当涉及到性能和速度时，Svelte在任何方面都无法超越React。正如我们已经看到的，Svelte在编译步骤中做了大部分的工作，而不是像React那样在浏览器中做这些工作。这极大地提高了性能，并促进了服务器的启动时间。

接下来给Svelte带来性能提升的是它不使用虚拟DOM的事实。根据Svelte的说法，Virtual DOM可能比Real DOM快，但它很慢。Svelte在他们的网站上也有一篇关于这个问题的，你可能想看一下。

语法和学习曲线

Svelte和React都遵循基于组件的开发架构，但区别在于React使用 *** X，而Svelte本身就是一种由三种标准语言组成的语言。HTML、CSS和JavaScript。

此外，Svelte代码更容易阅读，没有多余的代码。Svelte默认是真正的反应式，这使它在这方面比React更有优势。

谈到易学性，Svelte又比React更有优势–原因是大多数开发者在开始使用框架之前就已经精通HTML、CSS和JavaScript了。由于React使用 *** X，许多开发者发现它过于复杂，更难掌握。

库的大小

Svelte 默认创建较小的捆绑包。为此，它在编译过程中努力工作，将 Svelte 代码转换为高度优化的 vanilla JavaScript。一个典型的 Svelte 应用程序的。

React 使用运行时库，您需要将其包含在捆绑包中。这意味着一个 React 应用程序（包括 ReactDOM 库）的压缩包大小大约为 44.5 KB，比 Svelte 的压缩包大得多。

这些公式基于对实际项目的分析，显示了随着 Svelte 或 React 应用程序的增长，捆绑包大小会发生怎样的变化：

• Svelte：捆绑字节数 = 0.493 * 源代码大小 + 2811
• React：捆绑字节数 = 0.153 * 源代码大小 + 43503

源代码每增加一个字节，就相应增加：

• Svelte 的捆绑大小增加 0.493 字节。
• React 的捆绑大小增加 0.153 字节。

不过，Svelte 的起始基本大小要小得多，只有 2,811 字节。React 开始时的基本大小为 43,503 字节。

随着应用程序的增长，React 的捆绑大小会变得比 Svelte 小，这就是拐点。根据上述公式，当应用程序的组件源代码约为 120 KB 时，就会出现拐点。

换句话说，对于组件源代码少于 120 KB 的应用程序（大多数应用程序都是这种情况），Svelte 生成的捆绑包通常比 React 小。这将加快加载速度并提高性能。

生态系统、文档和社区

我们已经看到，React有一个比Svelte大得多的生态系统，因为它是JavaScript生态系统中最古老的 *** 框架之一。这意味着在使用React时，获得支持、代码帮助和寻找资源要比使用Svelte容易得多。

不过在文档方面，Svelte比React更出色。Svelte文档是学习Svelte的更好的独立资源–甚至还有一个内置的。

另一方面，React的文档相对较差，而且他们的文档也不是互动的。然而，React团队正在努力发布，这些文档现在处于测试阶段，很快就会公开。

在社区方面，React subreddit 就有 41 万成员。

您可以在这里找到许多教程、文章和论坛，帮助您学习 React，甚至解决您无法解决的问题。

社区支持还能帮助您及时了解更佳实践和新趋势。发现，React 是最受喜爱的 Web 框架。42.87%的专业开发人员选择了它。

Svelte 是一个较新的框架，因此其生态系统和社区相比之下要小得多。不过，开发人员喜欢它的简洁性和性能，而且 Svelte 社区的发展也相当迅速。

Svelte *** 子论坛目前仅有 37k 名成员。虽然这个数字不小，但还不到 React *** 子论坛的 1/10。

Svelte 的工具和库可能也不如 React 多。但是，即使在今天，您可以使用的工具也足以帮助您构建完整的应用程序。

就业机会

根据，React在认知度和使用率的排名中都位列之一，而Svelte则排名第四。

我们可以清楚地看到，React和Svelte在这里有很大的差距，这也意味着React的工作机会比Svelte多。

如果你是一个新的开发者，我们建议你从React开始，以增加你被录用的机会。

动态样式设计

React和Svelte都支持动态样式设计，但区别在于React通过 *** X支持内联样式设计。在Svelte中，我们把样式放在组件文件中独立的 <style></style> 块中。

小结

React和Svelte都是的顶级框架–这取决于使用情况–而且每一个框架都有自己的优点和缺点。你应该能够根据我们在这里所做的比较来决定哪一个最适合你的需求。

如果你是一个只想提高技能的初学者，你肯定应该给Svelte一个尝试。当涉及到性能和满意度时，Svelte在各方面都优于React。

但如果你是一个有经验的开发者，并且已经站稳脚跟，React将是你更好的选择，因为它有一个庞大的生态系统，在其中寻找资源和获得支持会容易得多。对于一个以就业为之一要务的开发者来说，React是更好的选择，从初级开发到高级开发，都有源源不断的职位空缺。

在Svelte和React之间，你接下来打算使用哪一个，你打算建立什么？我们很想听听你的意见! 请在下面的评论区分享。