`setState`가 React 구성 요소 상태를 즉시 업데이트하지 않는 이유는 무엇입니까?

setState 메서드를 호출해도 상태가 즉시 변경되지 않는 이유는 무엇입니까?

React에서 setState 메서드는 구성 요소의 상태를 설정하는 데 사용되는 비동기 함수입니다. 이는 setState를 호출한 후 즉시 상태가 업데이트되지 않음을 의미합니다. 이는 setState가 구성 요소의 다시 렌더링을 트리거하기 때문에 비용이 많이 드는 작업이 될 수 있습니다. 브라우저가 응답하지 않게 되는 것을 방지하기 위해 setState 호출은 일괄 처리되어 나중에 실행됩니다.

setState의 비동기 특성

React 문서에 따르면 "setState()는 this.state를 즉시 변경하지 않지만, 보류 중인 상태 전환을 생성합니다." 따라서 setState를 호출한 후 this.state에 액세스하면 여전히 기존 값이 반환될 수 있습니다.

일괄 setState 호출

성능 최적화를 위해 여러 setState 호출을 함께 일괄 처리하고 단일 재렌더링에서 실행할 수 있습니다. . 이렇게 하면 불필요한 재렌더링을 방지하고 UI 응답성이 향상됩니다.

콜백 사용

setState 이후 업데이트된 상태 값에 액세스하려면 콜백 함수를 두 번째 인수로 사용할 수 있습니다. 이 콜백은 상태가 업데이트된 후에 실행됩니다.

setState({ key: value }, () => {
    console.log('updated state value', this.state.key)
});

예

다음 예를 고려하세요.

class NightlifeTypes extends React.Component {
   handleOnChange = (event) => {
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: value}, () => { 
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        
      }
   }
}

이 예에서 handlerOnChange 함수는 다음을 설정합니다. barClubLounge 상태 속성을 value 인수에 추가합니다. setState 호출의 콜백 함수는 콘솔 로그에 업데이트된 상태 값이 표시되도록 합니다.

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