일괄 업데이트 반응

반응에서 일괄 업데이트는 무엇입니까

간단히 말해서 더 나은 성능을 위해 반응은 여러 상태 업데이트를 단일 상태 업데이트로 결합할 것입니다.

예를 들어 동일한 클릭 이벤트 내부에 여러 개setState가 있는 경우 반응은 한 번만 렌더링을 유발하고 모든 상태 업데이트를 단일 업데이트로 결합하여 렌더링을 유발합니다.

반응이 setChange 메서드를 만날 때마다 렌더링을 유발한다는 것을 이전에 알고 있었기 때문에 이것은 놀라운 일이 될 수 있습니다.

버튼을 클릭한 후 콘솔에서 아래 코드의 출력은 무엇이라고 생각하십니까?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      flag: false,
    }
  }

  handleButtonClick = (event) => {
    console.log("Button clicked");

    this.setState({
      counter: this.state.counter + 1,
    });

    this.setState({
      flag: !this.state.flag,
    });
  }

  render() {
    return (
      <>
        <h1>{`Counter: ${this.state.counter}`}</h1>
        <h1>{`Flag: ${this.state.flag}`}</h1>

        <button onClick={this.handleButtonClick}>Click me</button>

        {console.log("render")}
      </>
    );
  }
}

위의 예를 살펴보겠습니다.

나는 App라는 클래스 구성 요소를 만들고 있으며 그 안에는 생성자 내에서 초기화되는 두 개의 값이 있습니다: counter 및 flag . onClick 함수를 전달하여 handleButtonClick 이벤트를 통해 버튼을 클릭할 때마다 이 값을 변경하겠습니다. 이 함수는 counter 및 flag의 상태를 업데이트하지만 setState를 두 번 호출합니다.

예상되는 상황:

먼저 "렌더링"은 초기 렌더링으로 인해 한 번 출력됩니다. 그런 다음 버튼을 클릭하면 setState를 두 번 호출했기 때문에 "렌더링"이 두 번 출력됩니다.

실제로 일어나는 일:

동일한 초기 "렌더링"출력이지만 버튼을 클릭하면 "렌더링"이 콘솔에 한 번만 출력됩니다. 이는 react가 여러 개state를 렌더링을 유발하는 단일 업데이트로 일괄 처리함을 보여줍니다.

이제 React에서 일괄 업데이트가 무엇인지 이해하셨기를 바랍니다. 여기서 실수를 발견하면 댓글로 알려주세요.