setState是同步还是异步

最新推荐文章于 2023-09-01 15:19:28 发布

努力让自己幸运

最新推荐文章于 2023-09-01 15:19:28 发布

阅读量1.5k

点赞数 1

分类专栏： react 文章标签： react.js javascript

本文链接：https://blog.csdn.net/qq_30523685/article/details/114090352

版权

本文探讨React中setState的异步与同步特性，详细解释在不同场景（如合成事件、生命周期、微任务/宏任务）下的执行状态，并分析了setState的批量处理和获取最新state的方法。总结了setState在原生事件中的同步执行和在合成事件、生命周期中的异步批量处理行为。

摘要由CSDN通过智能技术生成

在工作中或者面试时都会碰到 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>
    );
  }
}

执行结果