반응의 setstate는 언제 동기화됩니까?

React의 setstate는 기본 이벤트 및 setTimeout에서 "동기"이지만 React의 합성 이벤트 및 후크 함수에서는 "비동기"입니다. React에 의해 트리거된 이벤트인 경우 setState 호출은 동기화되지 않습니다. "this.state" 업데이트 다른 setState 호출은 "this.state"를 동기적으로 실행합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React의 setstate는 언제 동기화되나요? 비동기식은 언제입니까?

먼저 대답해 주세요.

때때로 비동기식으로 나타나기도 하고 동기식으로 나타나기도 합니다.

setState는 합성 이벤트 및 후크 함수에서만 "비동기"이며 기본 이벤트 및 setTimeout에서는 동기입니다.

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

1.setState는 합성 이벤트 및 후크 함수에서만 "비동기"이며 기본 이벤트 및 setTimeout에서는 동기입니다.

2. setState의 "비동기적"은 비동기 코드로 내부적으로 구현된다는 의미는 아닙니다. 실제로 실행 프로세스와 코드 자체가 모두 동기적이라는 의미입니다. 단지 합성 이벤트와 후크 함수의 호출 순서가 이전에 있을 뿐입니다. 업데이트,

결과적으로 합성 이벤트가 발생하고 업데이트된 값은 후크 함수에서 즉시 얻을 수 없으므로 소위 "비동기"를 형성합니다. 물론 업데이트된 결과는 두 번째 매개변수 setState(partialState, 콜백).

3. setState의 일괄 업데이트 최적화도 "비동기"(합성 이벤트, 후크 함수)를 기반으로 합니다. 기본 이벤트 및 setTimeout에는 일괄 업데이트가 없습니다.

"비동기"에서 동일한 값이 업데이트되는 경우 setState가 여러 번 설정되면 setState의 일괄 업데이트 전략이 이를 덮어쓰고 마지막 실행이 수행됩니다. setState의 여러 다른 값이 동시에 설정되면 업데이트 중에 일괄적으로 병합 및 업데이트됩니다.

React에서 이벤트 처리가 React에 의해 트리거되는 경우(예: onClick에 의해 트리거되는 이벤트 처리) setState를 호출하면 this.state가 동기적으로 업데이트되지 않습니다. 다른 setState 호출은 this.state를 동기적으로 실행합니다. 소위 "추가"란 React를 우회하고 addEventListener를 통해 직접 추가한 이벤트 처리 기능과 setTimeout/setInterval을 통해 생성된 비동기 호출을 의미합니다.

이유:

React의 setState 함수 구현에서는 isBatchingUpdates 변수를 사용하여 this.state를 직접 업데이트할지 아니면 대기열에 넣고 나중에 논의할지 결정합니다. isBatchingUpdates의 기본값은 false입니다. 이는 setState가 이를 동기식으로 업데이트한다는 것을 의미합니다. 그러나, 이 함수는 isBatchingUpdates를 true로 변경합니다. React가 이벤트 처리 함수를 호출하기 전에 이 batedUpdates를 호출하면 결과적으로 이벤트 처리 프로세스는 setState가 됩니다. React에 의해 제어되는 것은 동기화되지 않습니다.

https://github.com/LuNaHaiJiao/blog/issues/26

추천 학습: "react 비디오 튜토리얼"

을 참조하세요.

위 내용은 반응의 setstate는 언제 동기화됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!