为何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）：buttonon：click｛handleClick｝Removefirstthingbutton｛eachthingsasthing｝Thingcolor｛thing。color｝｛each｝
　　Thing。svelte的内容如下：pspanstylebackgroundcolor：｛color｝currentspanstylespan｛display：inlineblock；padding：0。2em0。5em；margin：00。2em0。2em0；width：4em；textalign：center；borderradius：0。2em；color：white；｝style
　　等效的React组件代码如下：importReact，｛useState｝fromreactimportstyledfromstyledcomponents；constthings〔｛id：1，color：0d0887｝，｛id：2，color：6a00a8｝，｛id：3，color：b12a90｝，｛id：4，color：e16462｝，｛id：5，color：fca636｝〕；constBlockstyled。spandisplay：inlineblock；padding：0。2em0。5em；margin：00。2em0。2em0；width：4em；textalign：center；borderradius：0。2em；color：white；backgroundcolor：｛propsprops。backgroundColor｝；constThing（｛color｝）｛return（pBlockbackgroundColor｛color｝）；｝exportconstApp（）｛const〔things，setThings〕useState（things）；constremoveFirstThing（）setThings（things。slice（1））return（buttononClick｛removeFirstThing｝｛things。map（thingThingkey｛thing。key｝color｛thing。color｝｝）；｝2。Svelte不是一个框架它是一种语言
　　它不只是通过