为何Svelte杀不死React？

　　大家好，很高兴又见面了，我是＂ 高级前端‬进阶 ‬＂，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　高级前端‬进阶前言
　　今天一起来看看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 不是一个框架——它是一种语言
　　它不只是通过