집 > 기사 > 웹 프론트엔드 > 반응에서 state와 setState를 사용하는 방법(자세한 튜토리얼)

반응에서 state와 setState를 사용하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-22 14:21:393298검색

이 글은 주로 리액트 스터디 노트에서 state와 setState의 사용법을 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 이제 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가며 살펴보겠습니다.

React에서는 state와 setState()를 사용하여 컴포넌트의 상태를 제어합니다.

state

state는 vue의 데이터와 비교할 수 있는 구성 요소 데이터 상태를 저장하는 데 사용됩니다.

1. 상태의 역할

상태는 React에서 구성 요소의 객체입니다. React는 사용자 인터페이스를 상태 머신으로 취급하고 다른 상태를 가지고 있다고 상상한 다음 이러한 상태를 렌더링하여 사용자 인터페이스를 쉽게 만들 수 있습니다.

React에서 구성 요소의 상태를 업데이트하면 사용자 인터페이스가 다시 렌더링됩니다(DOM을 작동하지 않음). 간단히 말해서 사용자 인터페이스는 상태 변경에 따라 변경됩니다. 2. 상태 작동 원리

일반적으로 사용되는 데이터 변경 사항을 React에 알리는 방법은 setState(data, callback)를 호출하는 것입니다. 이 방법은 데이터를 this.state에 병합하고 렌더링이 완료된 후 구성 요소를 다시 렌더링합니다. 선택적

콜백 콜백이 호출됩니다. 왜냐하면 React가 인터페이스를 최신 상태로 업데이트하는 역할을 담당하기 때문입니다.

setState()

vue와의 차이점은 다음과 같습니다. 해당 상태는 직접 수정할 수 없으며 setState() 메서드를 통해 수정해야 합니다.

1. SetState()는 성능 향상을 위해 상태를 일괄적으로 업데이트한 후 렌더링하는데, 이는 비동기 작업이므로 setSate 직후의 상태 값은 적용되지 않습니다. ()는 업데이트 이후의 상태가 아닙니다.

2. setState()의 첫 번째 매개변수는 Object와 Function

Object

this.setState({
 msg: &#39;更新state msg&#39;
})

두 가지 유형의 매개변수를 허용합니다. 매개변수가 Object인 경우 해당 상태의 키가 될 수 있으며 값은 새 값입니다. 하나의 값.

Function

매개변수가 함수인 경우 setState()는 이전 setState()의 결과를 이 함수에 매개변수로 전달합니다.

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

setState() 두 번째 매개변수는 상태 업데이트를 나타내는 콜백 함수입니다. Complete

this.setState({
 msg: &#39;更新state msg&#39;
}, () => {
 console.log(&#39;state 更新完毕&#39;)
})

이에 따라 Promise와 async/await를 사용하여 동기 작업으로 캡슐화할 수 있습니다.

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log(&#39;state 更新完毕&#39;)
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

반응에서 state와 setState를 사용하는 방법(자세한 튜토리얼)

관련 기사