[javascript] Sync 대신 reactjs Async에서 setState가 사용되는 이유는 무엇입니까?

일부 구성 요소에서 카운터를 증가한다고 상상해보십시오.

  class SomeComponent extends Component{

    state = {
      updatedByDiv: '',
      updatedByBtn: '',
      counter: 0
    }

    divCountHandler = () => {
      this.setState({
        updatedByDiv: 'Div',
        counter: this.state.counter + 1
      });
      console.log('divCountHandler executed');
    }

    btnCountHandler = () => {
      this.setState({
        updatedByBtn: 'Button',
        counter: this.state.counter + 1
      });
      console.log('btnCountHandler executed');
    }
    ...
    ...
    render(){
      return (
        ...
        // a parent div
        <div onClick={this.divCountHandler}>
          // a child button
          <button onClick={this.btnCountHandler}>Increment Count</button>
        </div>
        ...
      )
    }
  }

부모 및 자식 구성 요소 모두에 연결된 개수 처리기가 있습니다. 이것은 의도적으로 수행되므로 동일한 클릭 이벤트 버블 링 컨텍스트 내에서 setState ()를 두 번 실행할 수 있지만 두 개의 다른 핸들러 내에서 실행할 수 있습니다.

우리가 상상할 수 있듯이, 버블 링 단계 동안 이벤트 버블이 타겟에서 가장 바깥 쪽 컨테이너로 버블 링되기 때문에 버튼에 대한 단일 클릭 이벤트가 이제이 두 핸들러를 모두 트리거합니다.

따라서 btnCountHandler ()가 먼저 실행되고 카운트가 1로 증가한 다음 divCountHandler ()가 실행되고 카운트가 2로 증가합니다.

그러나 React Developer 도구에서 검사 할 수 있으므로 개수는 1로만 증가합니다.

이것은 그 반응을 증명합니다.

• 모든 setState 호출을 큐에 넣습니다.

• 컨텍스트에서 마지막 메서드 (이 경우 divCountHandler)를 실행 한 후이 큐로 돌아옵니다.

• 동일한 컨텍스트에서 여러 setState 호출 내에서 발생하는 모든 객체 변형 (예 : 단일 이벤트 단계 내의 모든 메서드 호출은 동일한 컨텍스트)을 하나의 단일 객체 변형 구문으로 병합합니다 (이것이 상태 속성을 독립적으로 업데이트 할 수있는 이유이기 때문에 합리적입니다. 처음에는 setState ()에서)

• 여러 setState () 호출로 인해 다시 렌더링되는 것을 방지하기 위해 하나의 setState ()에 전달합니다 (이것은 일괄 처리에 대한 매우 원시적 인 설명입니다).

반응에 의해 실행되는 결과 코드 :

this.setState({
  updatedByDiv: 'Div',
  updatedByBtn: 'Button',
  counter: this.state.counter + 1
})

이 동작을 중지하기 위해 setState 메서드에 대한 인수로 개체를 전달하는 대신 콜백이 전달됩니다.

    divCountHandler = () => {
          this.setState((prevState, props) => {
            return {
              updatedByDiv: 'Div',
              counter: prevState.counter + 1
            };
          });
          console.log('divCountHandler executed');
        }

    btnCountHandler = () => {
          this.setState((prevState, props) => {
            return {
              updatedByBtn: 'Button',
              counter: prevState.counter + 1
            };
          });
      console.log('btnCountHandler executed');
    }

마지막 메소드가 실행을 마치고 react가 setState 대기열을 처리하기 위해 반환되면 대기열에있는 각 setState에 대한 콜백을 호출하여 이전 구성 요소 상태를 전달합니다.

이러한 방식으로 반응하면 대기열의 마지막 콜백이 이전의 모든 콜백이 손을 댄 상태를 업데이트 할 수 있습니다.

답변

// call doMyTask1 - here we set state
// then after state is updated...
//     call to doMyTask2 to proceed further in program

constructor(props) {
    // ..

    // This binding is necessary to make `this` work in the callback
    this.doMyTask1 = this.doMyTask1.bind(this);
    this.doMyTask2 = this.doMyTask2.bind(this);
}

function doMyTask1(myparam1) {
    // ..

    this.setState(
        {
            mystate1: 'myvalue1',
            mystate2: 'myvalue2'
            // ...
        },
        () => {
            this.doMyTask2(myparam1);
        }
    );
}

function doMyTask2(myparam2) {
    // ..
}