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

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

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

state

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

1. 상태의 역할

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

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

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

setState()

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

Object

this.setState({
 msg: '更新state msg'
})

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
}
...

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

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

WeChat 미니 프로그램에서 이미지 전환 디스플레이를 구현하기 위해 스와이퍼 구성 요소를 사용하는 방법

vue2.0에서 일반적으로 사용되는 UI 라이브러리는 무엇입니까?

C#에서 문자를 정수로 변환하는 방법

vue2.0과 animate.css를 함께 병합하는 방법(자세한 튜토리얼)

위 내용은 반응에서 state와 setState를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!