왜 `setState()`가 React의 구성 요소 상태를 즉시 업데이트하지 않습니까?

React의 상태 관리: setState()의 비동기 특성 이해

React에서는 setState() 메서드를 사용하여 구성 요소의 상태를 업데이트합니다. 그러나 일반적인 오해 중 하나는 setState()가 상태를 즉시 수정한다는 것입니다. 이는 사실이 아닙니다.

setState()의 비동기 특성 이해

React의 문서에는 "setState()가 this.state를 즉시 변경하지 않지만 보류 중인 상태 전환을 생성합니다."라고 명확하게 명시되어 있습니다. 이는 setState()를 호출한 후에도 this.state에 액세스하면 여전히 기존 값을 반환할 수 있음을 의미합니다. React는 효율성을 위해 여러 setState() 호출을 일괄 처리할 수 있으므로 성능 최적화를 위해 이 동작을 허용합니다.

비동기 동작 관찰

React 문서의 Forms 섹션에서 다음 코드 조각을 고려하세요.

handleChange: function(event) {
    console.log(this.state.value);
    this.setState({value: event.target.value});
    console.log(this.state.value);
},

브라우저에서 입력 값을 업데이트하면 두 console.log 문 모두 동일한 결과가 출력되는 것을 확인할 수 있습니다. 값. 이 동작은 setState()의 비동기 특성을 보여줍니다. 첫 번째 console.log는 초기 상태 값을 표시하고, 두 번째는 setState()를 사용하여 업데이트했지만 여전히 동일한 값을 표시합니다.

상태 변경 후 코드 실행

필요한 경우 상태 변경이 발생한 후 코드를 실행하기 위해 React는 다음과 같은 솔루션을 제공합니다.

this.setState({value: event.target.value}, function() {
    console.log(this.state.value);
});

이 경우 setState()에 전달된 콜백은 상태 이후에 실행됩니다. 업데이트가 완료되면 console.log가 업데이트된 상태 값을 인쇄합니다.

위 내용은 왜 `setState()`가 React의 구성 요소 상태를 즉시 업데이트하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!