React setSate의 비동기 문제 분석

이 글의 내용은 React의 setSate의 비동기 문제에 대한 내용입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

문서를 읽어보면 대부분 React의 setState가 비동기식이라고 하는데 정말 비동기일까요? 그렇다면 다음과 같이 추측할 수도 있습니다. 동기화할 수 있습니까? 그렇다면 언제 비동기화해야 하고 언제 동기화해야 합니까?

먼저 setSate에 대한 React의 공식 설명을 살펴보겠습니다.

setState()를 업데이트 구성 요소를 즉시 실행하는 명령이 아닌 요청으로 간주하세요. 보다 인상적인 성능을 위해 React는 이를 연기하고 나중에 이러한 구성 요소를 모두 한 번에 업데이트할 수 있습니다. React는 변경된 결과가 setState 직후에 사용 가능할 것이라고 보장하지 않습니다.

매우 고전적인 예:

// 初始state.count 当前为 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

React에 익숙하다면 최종 출력 결과가 1이 아니라 0이라는 것을 알아야 합니다.

다른 예를 살펴보겠습니다

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  componentDidMount() {
    //手动绑定mousedown事件
    this.refs.button.addEventListener(
      "mousedown",
      this.onClick.bind(this)
    );
   
    //setTimeOut
    setTimeout(this.onClick.bind(this), 1000);
  }
  onClick(event) {
    if (event) {
      console.log(event.type);
    } else {
      console.log("timeout");
    }
    console.log("prev state:", this.state.number);
    this.setState({
      number: this.state.number + 1
    });
    console.log("next state:", this.state.number);
  }
}
export {Demo};

이 컴포넌트에서는 3가지 메소드를 사용하여 상태를 업데이트합니다

 1.在p节点中绑定onClick事件
 2.在componentDidMount中手动绑定mousedown事件
 3.在componentDidMount中使用setTimeout调用onClick

컴포넌트를 클릭한 후 결과를 추측할 수 있나요? 출력 결과는 다음과 같습니다.

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2

결과는 약간 예상치 못한 것 같습니다. 세 가지 방법 중 p에 바인딩된 onClick 이벤트만 setState가 비동기임을 증명할 수 있는 결과를 출력합니다.

요약:
1. 구성 요소 수명 주기 또는 반응 이벤트 바인딩에서 setState는 비동기적으로 업데이트됩니다.
2. 지연된 콜백이나 기본 이벤트 바인딩 콜백에서 setState를 호출하는 것이 반드시 비동기적인 것은 아닙니다.

이 결과는 setState가 비동기적으로 실행된다는 문이 잘못되었다는 의미는 아닙니다. 더 정확한 설명은 setState가 동기 실행을 보장할 수 없다는 것입니다.

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!

위 내용은 React setSate의 비동기 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!