大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端‬进阶

前言

今天一起来看看Svelte到底是什么？Svelte和React对比如何？

当我刚开始阅读 Svelte 文档时，发现它非常鼓舞人心，并打算在 Medium 上写一篇关于它的颂文。但是，在阅读了来自官方博客和社区的几篇文章后，我迟疑了，因为我注意到了 JavaScript 世界中一种常见修辞的迹象，一种让我非常不安的修辞。

嘿，还记得人类强大的头脑 30 年来一直试图解决的那个问题吗？ 我刚刚找到了一个通用的解决方案！ 为什么它还没有征服世界？ 应该是显而易见的。 Facebook 的营销团队正在密谋反对我们。

在我看来，可以说您的工具与现有工具相比具有革命性的进步。 但是，人很难对自己的创作保持完全公正的态度。 举个正面的例子——与其他解决方案比起来，我觉得 Vue 实在是干得漂亮。没错，确实存在一些我不敢苟同的质疑声音，但这些声音都在传达一个建设性的信息：

我们的解决方案是怎样怎样的，还有别的一些现有的解决方案。而且我们坚信我们的方案更优秀，原因是什么什么。一些常见的反对论点是什么什么。

Svelte 的官方博客却正好相反，它通过只显露片面的事实来麻痹读者，甚至有时会宣扬一些关于 Web 技术和其他库（我会着重提到 React，只因我对它的理解更深一些）的不实言论。因此在本文中，我会对 Svelte 调侃一二，平衡一下官方吹斜的天平。话虽如此，我仍认为 Svelte 中还是有闪光点的，我会在文末告诉你原因。

1.什么是 Svelte？

Svelte 是一种用于构建用户界面的工具，与流行的框架（如 React 和 Vue）利用虚拟 DOM 来更高效更新真实 DOM 不同，Svelte 使用静态分析在构建时创建 DOM 更新代码 。 下面是一个 Svelte 组件的示例（App.svelte）：

 Remove first thing

{#each things as thing}
 
{/each}

Thing.svelte 的内容如下：

 current

等效的 React 组件代码如下：

import React, {useState} from 'react'
import styled from 'styled-components';
const things = [
  { id: 1, color: '#0d0887' },
  { id: 2, color: '#6a00a8' },
  { id: 3, color: '#b12a90' },
  { id: 4, color: '#e16462' },
  { id: 5, color: '#fca636' }
 ];
const Block = styled.span`
  display: inline-block;
  padding: 0.2em 0.5em;
  margin: 0 0.2em 0.2em 0;
  width: 4em;
  text-align: center;
  border-radius: 0.2em;
  color: white;
  background-color: ${props => props.backgroundColor}
`;
const Thing = ({color}) => {
  return (
    

      
    
  );
}
export const App = () => {
  const [things, setThings] = useState(things);
  const removeFirstThing = () => setThings(things.slice(1))
  return (
    <>
      
      {things.map(thing =>
        
      }
    
  );
}

2.Svelte 不是一个框架——它是一种语言

它不只是通过