在 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()
hook。
Vue 則採取了一種更結構化的方法,使用類和 data
屬性。
在使用過這兩種方式之後,我發現 Svelte 更像是一種更接近 JavaScript 的語法。
有一件事我們需要注意到,這很容易學到:在更改值時,我們也必須進行賦值。
對於像字符串和數字這樣的簡單值,這通常是理所當然的,因為字符串的所有方法都返回新的字符串,數字也是如此 - 它們是不可變的。
但是對於數組呢?我們不能使用修改數組的方法,比如 push()
、pop()
、shift()
、splice()
…,因為沒有賦值的操作。它們改變了內部的數據結構,但是 Svelte 無法檢測到這一點。
嗯,你仍然可以使用它們,但是在進行操作之後,你需要將變量重新賦值給它自身,像這樣:
let list = [1, 2, 3]
list.push(4)
list = list
這有點反直覺,但你很快就會記住它。
或者你可以使用展開運算符來進行操作:
let list = [1, 2, 3]
list = [...list, 4]