React의 'setState'가 비동기식으로 나타나는 이유는 무엇이며 업데이트된 상태가 즉시 반영되는지 어떻게 확인할 수 있나요?

React의 지연된 상태 업데이트: 비동기 setState 이해

React 구성 요소로 작업할 때 setState 메서드의 특성을 이해하는 것이 중요합니다. 상태 업데이트가 즉시 발생하는 명령형 프로그래밍과 달리 React의 setState는 비동기식입니다. 이는 상태 업데이트가 구성 요소의 내부 상태에 즉각적인 반영을 보장하지 않는다는 것을 의미합니다.

문제의 사례: 지연된 보드Add Modal Show Flag

다음 코드를 고려하세요. React에서 BoardAdd 구성 요소를 구현하는 스니펫:

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

openAddBoardModal 메서드가 다음과 같은 경우 호출되면 boardAddModalShow 플래그를 true로 설정하고 해당 값을 콘솔에 인쇄합니다. 그러나 콘솔 출력에는 setState 호출에도 불구하고 값이 false로 유지되는 것으로 표시됩니다.

이유는 무엇입니까?

setState는 비동기입니다. 호출된 후 React가 다시 렌더링을 예약할 때까지 UI는 영향을 받지 않습니다. 재렌더링이 발생하기 전에 console.log 문이 실행되어 오래된 상태 값이 인쇄됩니다.

해결책: 콜백 사용

이 문제를 해결하려면, 콜백 함수를 setState에 대한 인수로 사용할 수 있습니다. 콜백은 상태가 업데이트되고 다시 렌더링이 발생한 후에 실행됩니다.

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}

이 경우 상태가 업데이트된 후 console.log 문이 실행되어 새 항목을 올바르게 표시합니다. BoardAddModalShow의 값을 true로 설정합니다.

setState를 비동기식으로 만드는 이유는 무엇입니까?

이 비동기식 setState의 특성은 성능 향상 목적을 제공합니다. 상태 업데이트는 다시 렌더링을 트리거하므로 이를 동기식으로 만들면 브라우저가 응답하지 않을 수 있습니다. 일괄 처리 setState 호출은 불필요한 재렌더링을 최소화하고 사용자 경험을 향상시켜 성능을 향상시킵니다.

위 내용은 React의 'setState'가 비동기식으로 나타나는 이유는 무엇이며 업데이트된 상태가 즉시 반영되는지 어떻게 확인할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!