React中State的更新是同步还是异步的？-JXin的博客

温馨提示

该文章距离上次更新已经过去了 792 天，文章内容可能已经过时。

state的更新可能是异步的

在React官网中说到：出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用，例如：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      a: 1,
    };
  }
  onAdd = () => {
    this.setState({
      a: this.state.a + 1,
    });
    this.setState({
      a: this.state.a + 1,
    });
    this.setState({
      a: this.state.a + 1,
    });
  };
  render() {
    return (
      <>
        <div>{this.state.a}</div>
        <button onClick={this.onAdd}>+1</button>
      </>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

如果说setState是同步的，那个每点击一次按钮，a的值都会增加3，但是事实上每点击一次按钮a的值就增加了1

所以说setState在这里是异步的，也就是在第一次点击按钮的时候onAdd方法相当于：

onAdd = () => {
	this.setState({
		a: 1 + 1,
	});
	this.setState({
		a: 1 + 1,
	});
	this.setState({
		a: 1 + 1,
	});
};

1
2
3
4
5
6
7
8
9
10
11

那么为什么说state的改变可能是异步的呢？因为在某些情况它也可以是同步的

如果改变state的代码处于某个HTML元素的事件中，则其是异步的，否则是同步的

例如：

在上面的例子中，吧onAdd方法修改一下

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      a: 1,
    };
  }
  onAdd = () => {
    this.setState({
      a: this.state.a + 1,
    });
    console.log(this.state.a);
  };
  render() {
    return (
      <>
        <div>{this.state.a}</div>
        <button onClick={this.onAdd}>+1</button>
      </>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

react中state状态改变是同步还是异步的

可以看到虽然视图改变了，但是打印出来的还是1，说明state状态的改变是异步的

在看另外一个例子：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      a: 1,
    };
    setInterval(() => {
      this.setState({
        a: this.state.a + 1,
      });
      console.log(this.state.a);
    }, 1000);
  }
  render() {
    return (
      <>
        <div>{this.state.a}</div>
      </>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

react中state状态改变是同步还是异步的

可以看到每次改变state状态之后，打印出来的值都更新了

两个例子说明了如果state状态改变的代码如果没有在HTML元素中，那么它就是同步的

在事件处理函数中如何获取state更新后的数据

要在事件处理函数中获取state更新后的数据，可以提前使用一个变量来存储计算结果，例如：

const onHandle = () => {
	const newA = this.state.a + 1;
	this.setState({
		a: newA,
	});
	console.log(newA);
};

1
2
3
4
5
6
7

或者使用setState的第二个参数，它是一个函数，这个函数会在state更新后被调用，例如：

const onHandle = () => {
	this.setState(
		{
			a: this.state.a + 1,
		},
		() => {
			console.log(this.state.a);
		}
	);
};

1
2
3
4
5
6
7
8
9
10