React、Vue和Angular之后的Svelte前端框架 - Oliver

21-05-16 banq

Svelte是一个基于组件的前端框架,例似React和Vue:

  • -更少的代码
  • -没有虚拟DOM
  • -真正的反应性/响应性/reactive

该项目已获得MIT许可,并于2016年11月26日由其创建者Rich Harris发布。该项目本身是在TypeScript中实现的。目前,它在GitHub上拥有47k星,并且拥有活跃的社区,其中包括391位贡献者。社区非常活跃,并且与React不同,没有庞大的公司来支持它。但是不用担心,斯维尔特不会很快消失!

 

它是如何工作的?

与React或Vue不同,Svelte不使用虚拟DOM或像Angular这样的变更检测算法。相反,它带有一个编译器,编译器解析您的代码并发出可精确更新DOM的新代码。

这意味着不需要进行任何区分检查,只进行逐步地更新DOM,浏览器这样处理起来就不吃力。因为Svelte不需要钩子来更新组件的状态,编译器可以做更多的事情。

一条简单的普通JavaScript语句就足够了。然后将该语句编译为理状态更改的代码。

就像React具有* .jsx文件,Vue具有* .vue单文件组件一样,Svelte也具有* .svelte文件。类似于Vue中的单文件组件,一个苗条的文件可以包含HTML,JavaScript和CSS。您可以在下面看到一个示例:

<script>
   const greeting = 'Hello Svelte';
<script>
<style>
   p{ margin:0 auto; }
</style>
<p>{greeting}</p>

下面是另一个Svelte内置反应性的示例,请看一下下面显示的组件。没有(React)挂钩,没有redux,没有状态管理库。仅纯JavaScript和指令。这就是Svelte编译器的强大功能!

<script>
  let  count = 0;
  function handleClick(){
   count += 1;
  }
</script>
<sytle>
  button {
    ......
  }
</sttyle>
<button on:click={handleClick}>
    Clicked {count}{count ===1 ? 'time':'times'}
</button>

注意到“Clicked {count}{count ===1 ? 'time':'times'}”当变量count值改变时,Svelte会渲染这部分的HTML。

您所看到的是相对平常的代码,但这足以使结果完全具有响应性。而React中的相同功能将使您需要编写更多代码,并使更多挂钩和函数正常工作。

 

是什么使Svelte如此强大?

Svelte的方法具有简单性和强大功能,因此功能如此强大。虚拟DOM的实现虽然也可以使单页应用程序变得引人注目,但这要付出一定的代价。例如,比较虚拟DOM和实际DOM,然后在运行时应用逐步更改也会降低性能,有时会带来复杂性;将所有这些都移至编译步骤,然后让浏览器执行其擅长的工作(管理DOM),可以使您的应用程序更快,捆绑包大小更小,交付的前端代码中库/框架的权重大大降低。

您是否还记得所有使许多其他库与虚拟DOM兼容的集成库?是的,我知道您并不总是需要这些。但是使用Svelte,您将永远不需要它们,因为没有虚拟DOM。

官方文档非常棒,其中涵盖了每个重要功能的精彩教程。它写得很好,并且很容易跟进。

vscode插件

1
猜你喜欢