React 与 Svelte 对比

介绍

我们越来越多地听说一个相对较新的 Web 框架，用于开发 Web 甚至移动应用程序的用户界面，这就是 Svelte。

我不想只写这项技术及其优缺点，而是想将它与最著名的 Web 框架 React 进行比较，以及它是否可以被 Svelte 击败。

苗条

许多开始使用这项技术的开发者都非常满意。他们中的许多人希望继续探索 Svelte 的深度，甚至通过资金和对 Github 代码库的贡献来支持该项目。

但是，是什么让 Svelte 脱颖而出并在竞争中如此独特呢？

Svelte 的主要特性在于它作为编译器而不是库运行。Svelte 将代码编译为纯粹优化的 JavaScript，而无需将整个库拖到生产环境中。这使得 Svelte 速度极快。

反应

另一方面，React 是一个拥有丰富社区、开发人员和庞大 Facebook 公司支持的库。

它是目前前端生态系统中最流行的技术。

让我们比较一下

• 哪一个对初学者更友好
• 表现
• 反应性
• 社区
• 服务器端渲染
• 捆绑大小
• 结论

哪一个对初学者更友好

当我们开始学习新事物时，我们总是会先评估一下学习该技术或其他技术需要花费多少时间和精力。因此，“哪个最适合初学者”这个标准至关重要。

只要具备 JavaScript 基础知识，学习 Svelte 和 React 都不难。

如果你学习 React，你可能需要更多时间学习 JSX 或 CSS-in-JS 之类的东西，尽管这并不可怕或难以理解。下面是一个 JSX 语法的示例。

Hello.js

import React from "react";

const Hello = (props) => {
  const element = <h1>Hello, {props.world}!</h1>;

  return element;
};

export default Hello;

而 Svelte 更像是一个简单的 JavaScript 应用程序，只对 HTML 做了一些细微的调整。您可以在这里看到 Svelte 语法的示例。

Hello.svelte

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: red;
  }
</style>

表现

在这次比较中，Svelte 不仅可以自豪地超越 React，而且还可以超越许多其他框架。

Svelte 为何这么快？

与 React 不同，Svelte 不会将框架的全部代码加载到浏览器中，而是
在构建时将应用程序变成轻量级且优化的原生 Javascript 代码，并且不会给浏览器加载不必要的工作。

Svelte 的另一个非常大胆的决定是停止使用 VirtualDOM。

VirtualDOM 几乎是 React 快速运行的全部原因，并使其能够达到如此快的速度。

但是 VDOM 是什么？

它是在后台使用应用程序初始化的 realDOM 的副本，我们指定界面应该是什么样子，然后使用 VDOM（即 ReactDOM 库）的 React 找到更新 realDOM 的最佳和最有效方法 - 这也称为协调过程或差异。

Svelte 在构建时运行，将您的组件转换为高效的命令式代码，从而精准地更新 DOM。因此，您可以编写出性能卓越、功能强大的应用程序。

反应性

什么是反应式编程？

每个开发人员对于响应式的定义都有自己的看法。
以下是我喜欢的定义：

函数式响应式编程的本质是在声明时完全指定值的动态行为

- Heinrich Apfelmus，来自 Michel Weststrate

但简单地说，我们可以这样想——当一个值发生变化时，你的应用程序应该做出反应。

在 React 中，如果你想让你的应用程序具有响应式特性，你需要添加this.stateAPI useState，否则你的应用程序将无法响应应用程序值的变化。所以 React 并非完全是响应式的。

但是 Svelte 怎么样？

Svelte 本身就为 JavaScript 带来了响应式特性。它会仔细检查你的代码，并监视依赖于变量的组件，然后随着变量的变化更新这些组件。这样，Svelte 就无需依赖第三方 API 即可实现响应式。

在下面的例子中，我们声明了反应变量doubled，该变量仅在变量count更新时才会改变，因此doubled现在与count变量绑定。

Svelte 中的符号$代表 Reactive 声明。

<script>
  let count = 0;
  $: doubled = count * 2;

  const handleClick = () => count += 1;
</script>

<button on:click="{handleClick}">Click me!</button>

<p>{count} doubled is {doubled}</p>

与 React 相比，Svelte 可以被认为更具响应性

社区

我想大家都已经知道 React 是目前最流行的框架，这意味着有更多的开发人员就这项技术进行交流、讨论和争论。

这样的开发人员还有很多，所以如果你需要为客户制作一个 Web 应用程序，那么找一个使用 React 编写这个应用程序的人比找一个使用 Svelte 的人要容易得多。

另一件重要的事情是，React 得到了庞大的 Facebook 公司的支持，并且并不打算在不久的将来消失。

Svelte 曾经是 Rich Harris 的一个业余项目，最近加入了 Vercel 团队，这是一个很大的优势，为这项技术带来了巨大的前景。

此外，根据 2021 年 JS 现状调查，新晋框架 Svelte 荣登榜首，成为最受欢迎的框架。React是最受开发者欢迎的框架，四分之一的开发者都渴望使用。

服务器端渲染

服务器端渲染 (SSR) 是在服务器上渲染网页并将其传递给浏览器（客户端）的过程，
而不是像使用 React 那样将简单的 HTML 页面发送到浏览器<div id="root"></div>，然后使用 Javascript 将所有内容推送到该 div，而是发送完整的 HTML 页面，准备在浏览器中呈现其完整的初始页面内容。

这种方法有利于提高页面初始加载速度，并显著提升 SEO。此外，SSR 页面对于网速较慢的用户来说也是最佳选择，因为他们可以在 JavaScript 处理过程中看到渲染后的 HTML。

在 React 中，有 Next.js。

Next.js 是一个基于 Node.js 构建的 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。React 文档将 Next.js 列入“推荐工具链”中，并建议开发者在“使用 Node.js 构建服务器端渲染网站”时将其作为解决方案。

另一方面，Svelte 有其 SvelteKit。

SvelteKit 是 Svelte 的全栈、服务器端、预渲染应用程序框架，可以将生产版本输出到不同的环境。

Next.js 是一款非常棒的工具，因为它成功地将庞大的 React 库精简成更小的块，并且有很多巧妙的设计决策，但也有一些不尽如人意的地方。第一次或第二次的 JS 下载量为 70kb，但 SvelteKits 的初始 JS 下载量仅为 70kb，因为它内置了更多功能。

捆绑大小

另一个同样重要的事情是捆绑包的大小，捆绑包越小，页面速度越快。

React 的 gzip 压缩版本有42.2KB，但 Svelte 团队做了一些不寻常的事情，使 Svelte 只有1.6KB，比 React 小 26 倍，哇 😯。

结论

最终的比较似乎表明 Svelte 是赢家，许多经验丰富的开发者也表示未来就在它身后。但这种说法必须谨慎看待，React 是一项优秀的技术，拥有庞大的社区，而 Svelte 要想超越它，还有很长的路要走。

熟悉 Svelte 并从中获得一些新东西将是一个很好的建议。

但从 2022 年起，商业领域中 Svelte 和 React 之间的选择必定会落在React身上。