这个题目可能有点夸张，但不管怎样Svelte和它的理念就是这样的。如果你还没听说过Svelte的话就去了解一下吧——你会见证一场革命的，它将取得空前的成就（没有给Svelte团队增加压力的意思）。

本文不是Svelte的入门教程。Svelte团队已经做了一份很棒的交互式手把手入门教程，能帮助你轻松迈入响应式编程的天地。

Svelte教程地址：https://svelte.dev/tutorial/basics

先来份免责声明吧：我不是编程高手，我也没有无所不知。我只是非常热衷于每天出现的创新事物，喜欢随时随地谈论它们而已——这也是这篇文章的来历。请客观对待我说的每一句话，如果我哪里跑了火车也请告诉我吧。

那好，我们这就开始正题吧！

首先，谈谈React

讨论为什么我认为Svelte有如此革命性的突破之前，咱们先来看看之前Dan发布的这条推文，研究一下它背后的含义：

另一个免责声明：本文可没有批判React的意思。我只是拿React来举个例子说明问题，因为大多数读者迟早都会用到它的。提React只是因为它是跟Svelte对比的最佳例子罢了。

Dan上面那句话究竟是什么意思？这对我们现在写代码的方式有什么影响？要回答这个问题，我先简单介绍一下React的工作机制吧。

当你呈现一个React应用时，React会在所谓虚拟DOM中保留DOM的副本。虚拟DOM充当你的React代码与浏览器绘制到DOM的内容之间的中间层。

然后当你的数据出现变动时（可能因为你调用了this.setState，useState），React会做一些工作来确定如何在屏幕上重新绘制UI。

它会对比虚拟DOM与真实的DOM，以确定数据更新导致了哪些更改。然后它会仅重新绘制与虚拟DOM中的新副本不匹配的DOM部分，这样就无需在每次数据更新时重新绘制整个DOM了。

这就显著提升了性能，因为更新虚拟DOM比更新真实DOM要节省很多资源，而React只更新真实DOM中需要改变的部分。有一篇文章很好地解释了这一过程：
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

但你可能会发现这个实现有点问题。如果你没有告诉React你的数据已经改变了（比如说调用this.setState或Hooks之类），那么虚拟DOM就不会有变化，React也不会随之响应（Duang！搞砸了！）。

这就是Dan所说的，React并不是完全的响应式设计的意思。React需要你手动跟踪应用数据，并在数据变化时告诉React，这也意味着你得做更多工作。

好了，现在该谈Svelte了

Svelte是一种构建UI的全新途径，它速度极快、效率极高，是真正的响应式设计，还不需要虚拟DOM；用Svelte写的代码比其它任何框架或库都更加简洁。

说得这么好听，可你肯定会问它和其它一大堆JavaScript库和框架究竟有什么区别呢？我来逐一说明吧，

真正的响应式设计

Svelte既不是库也不是框架；相反，Svelte是一个编译器，它吃进你的代码并吐出与你的DOM直接交互的原生JavaScript，不需要中间层。

等等，什么？编译器？是的——编译器。这个思路太强悍了，我都不知道为什么以前没人想得到呢？为什么这个主意这么棒，听我细细道来吧。

引一句Rich Harris在YGLF 2019大会上的讲话：

Svelte 3.0将响应设计从组件API移到了编程语言中。

这说的是啥？别急，我们已经看到React和大多数其他前端框架，要求你在更新其虚拟DOM之前，使用API来告诉它数据已更改（再次通过调用this.setState或useState）。

在React以及大多数UI框架和库中，调用this.setState意味着你的应用的响应能力是与特定的API绑定的，没有API它就没法知道数据什么时候变动了。

Svelte采取了另一种方法解决这个问题。

它从运行代码的方式中获取了Observable的灵感。它不是从上到下运行代码，而是以拓扑顺序运行它。查看下面的代码片段，我们将了解以拓扑顺序运行它的含义。

1. (() => {
2.   const square => number => number * number;
3.
4.   const secondNumber = square(firstNumber);
5.   const firstNumber = 42;
6.
7.   console.log(secondNumber);
8. })();

现在如果你按从上到下的顺序运行这几行代码的话就会在第4行遇到错误，因为secondNumber依赖firstNumber，而这时候firstNumber尚未初始化。

如果以拓扑顺序运行这段代码则不会出现任何错误。为啥呢？编译器并不会按从上到下的顺序运行这段代码；相反，它会查看所有变量并生成依赖图（比如说A依赖B才能工作之类）。

这算是对编译器如何以拓扑顺序编译代码的简化解释了。

1. 这个新变量'square'是否依赖其它变量？
      - 它没有，所以我会初始化它
2. 这个新变量'secondNumber'是否依赖其它变量？
      - 它依赖'square'和'firstNumber'。我已初始化'square'，但我还没有初始化'firstNumber'，马上就会做。
3. 好的，我已初始化'firstNumber'。现在我可以使用'square'和'firstNumber'初始化'secondNumber'了
      - 我是否拥有运行此console.log语句所需的所有变量？
      - 是的，所以我会运行它了。

乍看上去代码好像是从上到下的运行顺序，但仔细观察就会发现它的确是跳着执行的。

跑到第4行时，编译器发现它没有firstNumber，因此会暂停执行并查看代码，找出它是不是在别的地方定义了。一看，原来它是在第5行定义的，所以编译器会先运行第5行，然后返回第4行继续执行。

如果语句A依赖于语句B，则语句B会先运行，运行顺序与声明的顺序无关。

那么这和Svelte实现真正的响应式设计又有什么关系？具体来说，你可以在JavaScript中用标识符标记一个语句，如下所示：$: foo = bar。它会在foo = bar语句中添加一个名为$的标识符（如果之前未定义foo，则严格模式下会出错）。

所以在这种情况下，当Svelte看到任何带有$:前缀的语句时，它就知道左边的变量要从右边的变量中获取值。我们现在有了一种方法可以将一个变量的值绑定到另一个变量。

响应！这意味着我们现在正在使用JavaScript的API核心部分来实现真正的响应设计，无需摆弄像this.setState这样的第三方API。

实践中是这个样子：

1. // vanilla js
2. let foo = 10;
3. let bar = foo + 10; // bar is now 20
4. foo = bar // bar is still 20 (no reactivity)
5. bar = foo + 10 // now bar becomes 30

6. // svelte js
7. let foo = 10;
8. $: bar = foo + 10; // bar is now 20
9. foo = 15 // bar is now 25 because it is bound to the value of foo

请注意，在上面的代码中我们不需要将bar重新分配给foo的新值——比如直接通过bar = foo + 10；或者通过调用像this.setState({ bar = foo + 10 });这样的API方法，现在都用不着了。它会自动为我们处理好的。

这意味着当你将foo更改为等于15时，bar会自动更新为25，并且你不必调用API来为你更新它。Svelte已经知道了。

上面的Svelte代码的编译版本如下所示：

1. ... omitted for brevity ...
2. function instance($$self, $$props, $$invalidate) {
3.   let foo = 10; // bar is now 20
4.   $$invalidate('foo', foo = 15) // bar is now 25 because it is bound to the value of foo
5.   let bar;
6.   $$self.$$.update = ($$dirty = { foo: 1 }) => {
7.     if ($$dirty.foo) { $$invalidate('bar', bar = foo + 19); }
8.   };
9.   return { bar };
10. }
11. ... omitted for brevity ...

好好花点时间研究一下上面这段代码吧，慢慢来，不要着急。

看到在bar被定义之前foo是如何更新的了吗？那是因为编译器正在以拓扑顺序，而非严格的自上而下的顺序在解析Svelte代码。

Svelte会自己响应数据变化。它用不着你操心更改的内容和时间；它自己就会知道。

注意：在第4行里，bar的值到下一个Event Loop之前都不会更新的，这样一切都会干净又整洁。

这样你就不必在数据发生变化时手动更新状态了。你可以专注于你的代码逻辑，而Svelte可以帮助你将UI与最新状态协调好。

简洁

前面我不是说Svelte可以用更少的代码来完成更多工作吗？事实确实如此。下面我拿React中一个简单的组件和Svelte中的对应组件举个例子，你自己看：

17行对29行代码，这俩应用的功能完全相同，看看我们在React.js中编写了很多的代码吧——这我还没开始用Angular呢。

Svelte代码除了更简洁耐看外也更容易理解，因为它的活动部件比React代码少。我们不需要事件处理程序来更新输入元素的值——只需绑定值即可。

回想你刚刚开始学习网页开发的时候。哪边的代码会让你更难理解？左边的还是右边的？

虽然这看起来没那么重要，但当你开始构建更大、更复杂的应用时，很快就会发现不用写那么多代码是多么有用。我曾花了好几个小时试图理解同事编写的大型React组件是如何工作的。

我确实相信Svelte的简化API能使我们更快地阅读和理解代码，从而提高整体工作效率。

性能

好了，现在我们已经知道Svelte是真正的响应式设计，可以让你用更少的投入做更多的事情。那么它的性能如何？完全用Svelte编写的应用能有很好的用户体验吗？

React之所以如此强大，其原因之一在于它使用虚拟DOM来更新应用程序的UI，一次只更新一部分，无需在每次更改内容时重新构建整个DOM（这非常消耗资源）。

但这种方法的缺点是，如果组件的数据发生变化，React将重新渲染该组件及其所有子组件，哪怕子组件不需要重新渲染也得这么干。这就是为什么React会有shouldComponentUpdate、useMemo、React.PureComponent一类的API。

只要使用虚拟DOM在状态更改时渲染UI，这个问题就没法解决。

Svelte不使用虚拟DOM，那么它如何解决重新绘制DOM以匹配应用程序状态的问题呢？这里我再次引用Rich Harris在YGLF上的精彩演讲：

框架不是用于组织代码的工具。它们是组织你思想的工具。

Rich认为框架可以在构建步骤中运行，从而让代码在运行时无需中间层。这也就是为什么Svelte是编译器而非框架的原因。

这就是为什么Svelte速度飞快的原因。Svelte将你的代码编译为一个直接与DOM交互的高效底层代码。但Svelte是如何解决数据更改时重新绘制整个DOM的问题呢？

像React这样的框架需要你调用API方法，在数据发生变化时告诉它；但使用Svelte时，只需使用赋值运算符=就足够了。

如果状态变量——比如说foo ——使用=运算符更新，则Svelte将仅更新依赖foo的其它变量，如前所示。这让Svelte可以仅绘制DOM的一部分内容，这些部分以某种方式从foo中获取它们的值。

我将省略实际的实现方式，因为这篇文章已经足够长了。你可以看看Rich Harris自己的解释：
https://www.youtube.com/watch?v=AdNJ3fydeao

结语

Svelte 3.0是最近软件开发业的福音之一。有些人可能会说这是夸大其词，但我不这么认为。Svelte背后的理念及其实现将使我们能向浏览器发送更少的JS模版，却做更多的事情。

反过来，这会带来性能更强、更轻量的应用程序，并生成更易阅读的代码。那么现在，Svelte将很快取代React、Angular或其它流行前端框架吗？

现在我可以说答案是否定的。与它们相比Svelte相对年轻，所以它需要时间来成长、成熟，并解决一些我们可能还没发现的问题。

就像React诞生后改变了软件开发产业一样，Svelte也有可能改变我们对框架的看法，以及我们开发新事物时的思路。

英文原文：https://blog.logrocket.com/truly-reactive-programming-with-svelte-3-0-321b49b75969

创作场景

React 不是真正的响应式编程，Svelte 才是