在Svelte中处理状态更新

如何在Svelte中使用反应式分配来处理组件中的状态更新

Svelte的一大优点是,您无需执行任何特殊操作即可更新组件的状态。

您所需要做的只是一项任务。

说你有一个count多变的。您可以简单地使用count = count + 1, 或者count++

<script>
let count = 0

const incrementCount = () => { count++ } </script>

{count} <button on:click={incrementCount}>+1</button>

如果您不熟悉现代Web框架如何处理状态,那么这并不是开创性的,但是在React中,您必须调用this.setState(),或使用useState()钩。

Vue使用类和data财产。

两者都使用过后,我发现Svelte是一种更像JavaScript的语法。

我们需要注意一件事,这很快就会学到:更改值时还必须进行赋值。

对于诸如字符串和数字之类的简单值,通常是给定的,因为String上的所有方法都返回新的字符串,数字也一样,它们都是不可变的。

但是对于数组?我们不能使用改变数组的方法。喜欢push()pop()shift()splice()…因为没有作业。他们更改了内部数据结构,但Svelte无法检测到。

好吧,你能够仍然使用它们,但是在完成操作之后,您可以将变量重新分配给它自己,如下所示:

let list = [1, 2, 3]
list.push(4)
list = list

这有点违反直觉,但是您会很快记住它。

或者,您可以使用传播操作符执行操作:

let list = [1, 2, 3]
list = [...list, 4]

免费下载我的苗条手册


更多精妙的教程: