setState是同步还是异步

在工作中或者面试时都会碰到 setState 的一些问题。今天我们就这些问题来看下 setState。

用过 react 的都知道，修改 state 唯一的办法就是 setState方法，而不是直接修改state值。

而在 react 中 setState 的执行是"异步"的，是"批量"的，而不是"同步"的。
这是因为在调用 setState 之后 react 并没有立即更新，而是缓存起来了，等事件完成之后，在进行批量更新，一次更新之后并重新渲染，避免多次渲染组件。

接下来看下在那种情况为同步？那种情况有是异步的？

同步&异步

合成事件中: 异步

export default class Main extends Component {
  state = {
    count: 0
  }

	onClick = () => {
		this.setState({
		  count: this.state.count + 1
		})
		console.log(this.state.count); // 0
	}
  render() {
    return (
      <div style={
  {padding:"30px"}}>
        <p>{this.state.count}</p>
        <Button onClick={this.onClick}>+1</Button>
      </div>
    );
  }
}

执行结果

0