Analysis of asynchronous issues of react's setSate

This article brings you an analysis of the asynchronous problem of react's setSate. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When we read the documentation, most of them say that react's setState is asynchronous, but is it really asynchronous? If so, then we can also guess: Can it be synchronized? So when does it need to be asynchronous and when does it need to be synchronized?

Let’s first take a look at react’s official description of setSate:

Consider setState() as a request rather than a command to immediately execute the update component. For better performance, React might defer it and update these components all at once later. React does not guarantee that the changed results will be available immediately after setState.

A very classic example:

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

If you are familiar with react, you must know that the final output result is 0, not 1.

Let’s look at another example

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};

Use 3 methods to update state in this component

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

After clicking the component, can you guess the result? The output result is:

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

The result seems a bit unexpected. Among the three methods, only the onClick event bound on p outputs the result that can prove that setState is asynchronous. The other two methods show that setState seems to be synchronous.

Summary:
1. In the component life cycle or react event binding, setState is updated asynchronously.
2. Calling setState in a delayed callback or native event-bound callback is not necessarily asynchronous.

This result does not mean that the statement that setState is executed asynchronously is wrong. A more accurate statement is that setState cannot guarantee synchronous execution.

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Video Tutorial column on the PHP Chinese website!

The above is the detailed content of Analysis of asynchronous issues of react's setSate. For more information, please follow other related articles on the PHP Chinese website!