React中的setState是异步的吗？

娜姐

发布于 2020-09-22 10:47:26

2.2K0

发布于 2020-09-22 10:47:26

文章被收录于专栏：娜姐聊前端

在React中更新状态，一般的写法都是this.setState({a:1})，而非Vue那样this.a = 1。并且，如果在如下场景：

state = {
    count: 0,
};
componentDidMount() {
    this.setState({
      count: this.state.count + 1,
    });
    console.log("console: " + this.state.count);
  }
render(){
   console.log("render: " + this.state.count);
}

打印结果为

console:0
render:1

所以，从表现上看，setState是异步的。

其实，这只是React的障眼法。

setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在）

1. 对比Vue

Vue的数据更新是基于event-loop 机制（是更新，不是数据双向绑定）。

image.png

Vue在侦听到数据变化后，会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更（如果同一个 watcher 被多次触发，只会被推入到队列中一次）。然后，在下一个事件循环Tick/微任务中，Vue 刷新队列执行实际工作。（事件循环参考《宏任务和微任务到底是什么？》）

2. `React.setState()`中的异步更新

setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false,），它决定了state是同步更新还是异步更新。

调用栈如下（涉及到React事务机制，可以参考文章《React进阶篇（四）事务》）：

setState调用.png

setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。异步是为了实现批量更新的手段，也是React性能优化的一种方式。

2. `React.setState()`中的同步更新

当然，也是有办法同步获取state更新后的值：

setTimeout等异步操作中调用setState函数
DOM原生事件
利用setState回调函数
函数式setState用法

前两个都比较好理解，因为没有前置的batchedUpdate调用，所以isBatchingUpdates为false。不会开启批量更新模式，那么，在上面的调用栈图示里面，会直接走到事务更新。

后面两个方法，是React本身提供的。要注意的是，setState回调函数要在render函数被重新执行后才执行。

下面有一道题目，试试做吧！

import React from "react";

class TestView extends React.Component {
  state = {
    count: 0,
  };
  componentDidMount() {
    this.setState({
      count: this.state.count + 1,
    });
    console.log("console: " + this.state.count);

    this.setState({ count: this.state.count + 1 }, () => {
      console.log("console from callback: " + this.state.count);
    });

    this.setState(
      (prevState) => {
        console.log("console from func: " + prevState.count);
        return {
          count: prevState.count + 1,
        };
      },
      () => {
        console.log("last console: " + this.state.count);
      }
    );
  }

  render() {
    console.log("render" + this.state.count);
    return <h4>test</h4>;
  }
}

export default TestView;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react