/

svelte-reactive-assignments

在 Svelte 中處理狀態更新

如何使用 Svelte 中的反應式賦值來處理組件內的狀態更新

Svelte 的一個很棒的地方是，你不需要做任何特殊的事情來更新組件的狀態。

你只需要一個賦值操作。

假設你有一個 count 變量。你可以用 count = count + 1 或者 count++ 來對其進行增加：

1
2
3
4
5
6
7
8
9
<script>
let count = 0

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

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

如果你對現代 Web 框架如何處理狀態更新的方式不熟悉的話，這沒有什麼突破性的。但是在 React 中，你需要調用 this.setState() 或使用 useState() hook。

Vue 則採取了一種更結構化的方法，使用類和 data 屬性。

在使用過這兩種方式之後，我發現 Svelte 更像是一種更接近 JavaScript 的語法。

有一件事我們需要注意到，這很容易學到：在更改值時，我們也必須進行賦值。

對於像字符串和數字這樣的簡單值，這通常是理所當然的，因為字符串的所有方法都返回新的字符串，數字也是如此 - 它們是不可變的。

但是對於數組呢？我們不能使用修改數組的方法，比如 push()、pop()、shift()、splice()…，因為沒有賦值的操作。它們改變了內部的數據結構，但是 Svelte 無法檢測到這一點。

嗯，你仍然可以使用它們，但是在進行操作之後，你需要將變量重新賦值給它自身，像這樣：

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

這有點反直覺，但你很快就會記住它。

或者你可以使用展開運算符來進行操作：

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

tags: [“svelte”, “state update”, “reactive assignments”, “JavaScript”]