React中setState是同步还是异步?

1,041 阅读1分钟

react18之前。

setState在不同情况下可以表现为异步或同步。

在Promise的状态更新、js原生事件、setTimeout、setInterval..中是同步的。

在react的合成事件中,是异步的。


react18之后。

setState都会表现为异步(即批处理)。
官方详细说明。


react17和react18中setState在setTimeout中的表现

实例代码:

export default class Test extends Component {
  state = {
    num: 0
  }
  hClick = () => {
    setTimeout(() => {
      console.log('before----', this.state.num)
      this.setState({num: this.state.num+1})
      console.log('after----', this.state.num)
    }, 1000)
  }
  render() {
    return (
    <div>
      React 17/18
      <hr />
      {this.state.num}
      <button onClick={this.hClick}>+1</button>
    </div>)
  }
}

同样代码在react17和react18中的表现如下:

React17.gif

React18.gif