정보실

웹학교

정보실

javascript Svelte에서 상태 업데이트 처리

본문

Svelte의 장점 중 하나는 구성 요소의 상태를 업데이트 하기 위해 특별한 작업을 수행 할 필요가 없다는 것입니다.


https://flaviocopes.com/svelte-reactive-assignments/ 


과제만 있으면 됩니다.


count 변수가 있다고 가정하십시오. count = count + 1 또는 count ++를 사용하여 간단히 증가 시킬 수 있습니다.


<script>
let count = 0

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

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


최신 웹 프레임 워크가 상태를 처리하는 방법에 익숙하지 않은 경우에는 획기적인 것이 아니지만 React에서는 this.setState()를 호출하거나 useState() 후크를 사용해야 합니다.


Vue는 클래스와 데이터 속성을 사용하여 보다 체계적인 접근 방식을 취합니다.


두 가지를 모두 사용하여 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]



페이지 정보

조회 167회 ]  작성일19-10-16 11:08

웹학교