Svelte 与 React：2023 年应该学习哪个框架？

2025-06-07

Svelte 与 React：2023 年应该学习哪个框架？

在 Web 开发领域，有时感觉每天都会有一个新的前端框架出现！大多数框架来来去去，但有一件事是肯定的：Svelte 会一直存在下去。

但这并不意味着你应该放下一切，今天就学习它！总是追逐最新潮流会让你分心，不知所措。

这篇文章将一劳永逸地回答我应该学习 React 还是 Svelte？

您将看到一些代码示例，解释为什么 React 开发人员对 Svelte 如此着迷，但我们也必须现实一点。

React 已经存在很久了。它拥有更多的库、支持和工作机会。

Svelte 还能取代 React 吗？让我们来一探究竟！

  • 📍什么是 React？
  • 📍 什么是 Svelte？
  • 📍 React 和 Svelte 之间的 5 个区别
    • Svelte 的捆绑包尺寸较小
    • Svelte 更容易学习
    • Svelte 使用纯 HTML、CSS 和 JavaScript 进行编译
    • React 有更多的库
    • React 有 React Native
  • 📍 React 是一个库还是一个框架？
  • 📍 逐行比较 React 和 Svelte 项目
  • 📍 Svelte 比 React 更快吗？
  • 📍 何时从 React 切换到 Svelte
  • 📍 判决

什么是 React？

让我们从您可能已经听说过的 React 开始。

React 是一个渐进式 JavaScript 前端框架（或库，取决于你问谁），可帮助你构建复杂的 Web UI。

它由 Facebook（现为 Meta）于 2013 年创建，很快就在前端 Web 开发领域站稳了脚跟。

React 的核心关注的是状态和渲染状态，这意味着要使用它，您必须添加其他库来处理客户端功能和路由。

什么是 Svelte？

Svelte 也是一个前端 JavaScript 框架，注重简单性和速度。

它采用了一种更加幕后（魔术）风格的方法，它可以解释非常基本的 JavaScript 代码并为您处理 UI 和状态管理：

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Enter fullscreen mode Exit fullscreen mode

Svelte 由《纽约时报》的开发者 Rich Harris 于 2016 年创建，旨在高效地处理复杂的图表和图形。从那时起，它就发展成为 React 和 Vue 等框架备受青睐的竞争对手。

React 和 Svelte 之间的 5 个区别

1. Svelte 的构建包大小明显更小

我们构建的以下功能完全相同的应用程序的部署包大小为：React 为 41.2 kB，Svelte 为 2.1 kB。这几乎减少了20 倍🤯

为了获得这些数字，我用 Svelte 和 React 构建了一个功能相同的应用。我们将在“React vs Svelte 代码剖析”部分深入探讨这些应用。

捆绑包大小比较
我用 React 和 Svelte 构建了一个一模一样的应用。看看 Svelte 的打包体积有多小！

2. Svelte 语法简单，更容易学习

Svelte 采用了一种更隐蔽的方法，允许你编写非常少量的样板代码或语法糖来完成复杂的绑定。模板语法只是 HTML 加上一些额外的代码，这与 JSX（React 的等价物）有很大不同，也更容易学习。

React 反应变量声明：

react 反应变量声明

Svelte 反应变量声明：

精简的反应式变量声明

Svelte 看起来像普通的 JavaScript，但它具有与 React 完全相同的功能。更新 Svelte 变量将自动更新其所在的 UI 元素。

3. Svelte 符合纯 HTML、CSS 和 JavaScript

Svelte 将您编写的代码编译成基本的 HTML、CSS 和 JavaScript。它不需要像 React 那样与您的代码捆绑在一起！

React.js 需要包含在 bundle 中才能进行所有正确的虚拟 DOM 差异比较和创建，而 Svelte 不使用虚拟 DOM 来处理 UI。相反，它选择使用基本的 JavaScript 元素创建函数，例如document.createElement。

4. React 拥有更多为其构建的库和包

React 已经存在三年多了，目前也是 JavaScript 框架中事实上的王者👑。正因如此，它拥有大量用户和公司创建的包。

用户创建的包通常只是为了使路由和状态管理等事情更容易，或者添加滑块、灯箱等。这些并不重要，因为 Svelte 有可靠的选项并且兼容/适应大多数 JavaScript 插件。

更棘手的是，有些集成会先于其他框架创建 React 包。我在 Solana 和以太坊上开发 Web3 项目时就遇到过这种情况。

5. React 有 React Native

React Native 是使用率最高、支持率最高的跨平台框架之一。它支持使用 React 创建 iOS 和 Android 应用程序，并且只需一个代码库即可完成。由于其成熟度，它拥有大量的库、支持和学习资源。

尽管 Svelte 有替代品，例如名为 Svelte-native 的 NativeScript 改编版本，但它们并不具备与 React-native 相同的可靠性和功能集。

React 是一个库还是一个框架？

尽管 React 通常被称为框架，但考虑到其范围，它更像是一个库。它专门负责管理 UI 的状态，并使其与应用程序中的数据状态保持同步。

因此，它需要第三方库来处理应用程序路由（React Router）、UI 创建（JSX）和组件之间的状态管理（Redux）。

另一方面，Svelte 内置了上述所有功能，因此是更完整的 UI 管理解决方案。

你可以看到大多数人都同意这是一个图书馆，但仍然存在一些争论👇

逐行比较 React 和 Svelte 项目

比较两种 Web 技术的最佳方法是深入研究并使用它们进行构建。构建完全相同的应用程序有助于了解每个库/框架如何处理不同的功能。

我们将看看：

  • 条件渲染
  • 模板循环
  • 更新状态
  • 事件钩子

我们正在建造什么？

编码是一项很费力的工作，因此我们将构建一个简单的网络应用程序，让用户可以跟踪他们一天喝了多少杯水（或🍺）。

附加功能可以显示每杯酒的饮用历史和饮用时间。

我们将保持 UI 简洁，以便更加专注于底层框架。（参见下方 UI）

反应

为了分解代码，首先让我们深入了解一些 React 概念和术语👇

React 有几种你需要学习的语法。其中主要包括 Hooks、state 和模板 (JSX)。

Hooks——允许你进入应用程序的生命周期

状态 - 允许你根据数据变化更新 UI 元素。它将“状态”（或者更简单的变量）变化与 UI 更新联系起来

模板 - 允许您直接在 HTML 中使用变量和 JavaScript

React 组件的样式通常由单独的 .css（或 .scss）文件处理。

React 代码分解

使用钩子设置变量useState，允许更新变量并让 UI 动态呈现这些更新。

useEffect用于在应用程序加载时设置今天的日期。

JSX 模板在 HTML 中使用基本{}符号以及标准 JavaScript 函数，允许显示变量和循环数组（使用.map）。

苗条

Svelte 则采用了一种截然不同的方法，其风格更偏向于“幕后魔法”。其逻辑看起来基本像纯 JavaScript。在后台，这些代码的功能与 React 代码几乎完全相同。

Svelte 仍然具有像onMount和这样的钩子onDestroy，但只需分配一个变量并使其在模板（HTML）中完全反应和访问，不需要任何特殊的语法糖。

另一个很大的区别是，你可以直接在 Svelte 组件中编写 CSS/SCSS。不过这只是一个选项，因为你仍然可以像在 React 中一样导入样式，但我注意到大多数 Svelte 项目都使用样式内组件。

Svelte 代码分解

上面的代码实例化了一个cupsOfWater数组，并将新的日期变量设置为当前日期。

声明了一个函数，该函数创建一个新日期并将其存储在名为 cup 的变量中，然后将其添加到 cupsOfWater 数组的前面。

模板部分更接近 HTML，但增加了一些函数。同样，使用{}符号，您可以引用该&lt;script>部分中声明的任何变量。您还可以使用 事件监听器（例如on:click）、条件语句（例如{#if}）以及 循环{#each}。

您可以在这里自行探索和使用代码：

Svelte 比 React 更快吗？

是的，从快速的 HTML 生成到更快的构建和开发环境，Svelte 的表现都远远优于 React。

  • 生成 HTML
  • 根据状态更新 UI
  • 首次内容绘制
  • 互动时间
  • 速度指数

所有这些都体现出明显的差异，Svelte 占据优势。你的应用程序越大越复杂，这种差异就越明显。

在 Zeitspace 的一篇文章中可以看到很好的性能比较。

Svelte 比 React 更好吗？

当开始一个新项目时，Svelte 有足够的优势，因此应该始终将其作为考虑因素。

话虽如此，React 在使用上仍然绝对领先于 Svelte。这可能会导致第三方插件支持、招聘以及项目寿命方面的问题。

不过，Svelte 语法非常易于理解，这使得它非常容易上手，尤其是对于 React 开发者而言。公司在招聘 Svelte 项目时可以参考这一点（不要局限于 Svelte 开发者）。

何时从 React 切换到 Svelte

Svelte 是构建复杂网站或 Web 应用的绝佳选择。许多知名公司已开始将 Svelte 用于内部和外部应用程序：

  • 1Password
  • Avast
  • Chess.com
  • 阿拉斯加航空
  • 融合图表
  • 乐天
  • GoDaddy
  • IBM
  • 正方形
  • 《纽约时报》
  • 飞利浦
  • 根据 svelte.com 的报道，还有更多内容！

但这并不意味着您必须将当前的 React 应用程序放入垃圾箱！

那么什么时候才是使用 Svelte 的最佳时机呢？

如果您的应用/网站：

  • 由于带宽限制，需要较小的捆绑包大小
  • 需要尽快
  • 需要快速建造

什么时候不适合使用 Svelte？

如果您的应用/网站：

  • 严重依赖第三方集成/工具
  • 还将转化为移动应用程序

这些很快就不再成为问题，但在深入研究之前确实需要进行一些研究和尽职调查。

判决

本文概述了以下内容：

  • Svelte 与 React 有何不同
  • Svelte 比 React 更好的地方
  • Svelte 代码与 React 的比较
  • Svelte 的不足之处

通过这些比较，你应该能够决定是否要

  1. 了解有关 Svelte 的更多信息
  2. 将其用于您的下一个个人或工作项目

不过，我最好的建议是直接尝试用 Svelte 构建一些东西。如果你之前用过 React，我几乎可以保证你会喜欢它的简洁和速度。

文章来源：https://dev.to/mikehtmlallthethings/svelte-vs-react-which-framework-to-learn-in-2023-50gf
Devto 翻译
PREV
前端开发人员路线图（重温）
NEXT
我的极简主义 JavaScript 全栈入门套件