1. setState同步？异步？

在 React 的类式组件中，我们可以使用setState方法更新state状态。但有些时候使用setState之后，得不到最新的数据。

其实 React 中setState本身执行的过程和代码是同步的，只是因为 React 框架本身的性能优化机制而导致的。React 中合成事件和生命周期函数的调用顺序在更新之前，导致在合成事件和生命周期函数中无法立刻得到更新后的值，形成了异步的形式。

假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，当前组件就要被渲染n次，这对性能来说是很大的浪费。所以，React 为了性能原因，对调用多次setState方法合并为一个来执行。当执行setState的时候，state中的数据并不会马上更新。

前面已经说到，在 React 的合成事件和生命周期函数中直接调用setState，会表现出异步的形式。

除此之外，如果越过 React 的性能优化机制，在原生事件、setTimeout中使用setState，就会表现出同步的形式。

2. 表现为异步

1. React 合成事件

在 React 中直接使用的事件，如onChange、onClick等，都是由 React 封装后的事件，是合成事件，由 React 管理。那么由于性能优化的机制，在合成事件中直接调用setState，将表现出异步的形式。

如下代码，在合成事件onClick中，直接将state中的count加1，并在此之后打印count的值，结果第一次点击按钮时，会打印出0，而不是最新的1。

复制 1state = { count: 0 };
 2add = () => {
 3    this.setState({ count: this.state.count + 1 });
 4    console.log(this.state.count); // 0
 5};
 6render() {
 7    return (
 8        <>
 9            <div>当前计数：{this.state.count}</div>
10            <button onClick={this.add}>add</button>
11        </>
12    );
13}

2. 生命周期函数

生命周期函数也是由 React 所管理，在生命周期函数中直接调用setState，也会表现出异步的形式。

如下代码，在生命周期componentDidMount函数中，将state中的count加1，并在此之后打印count的值，结果打印出0，而不是最新的1。

复制 1state = { count: 0 };
 2componentDidMount() {
 3    this.setState({ count: this.state.count + 1 });
 4    console.log(this.state.count); // 0
 5}
 6render() {
 7    return (
 8        <>
 9            <div>当前计数：{this.state.count}</div>
10            <button>add</button>
11        </>
12    );
13}

3. 表现为同步

1. 原生事件

setState本身执行的过程是同步的，使用原生事件，绕过 React 的管理，将表现出同步的形式。

如下代码，通过id获取到 DOM 元素，用原生方法绑定点击事件。在点击事件中，将state中的count加1，并在此之后打印count的值，结果会打印最新的count值1。

复制 1`state = { count: 0 };
 2componentDidMount() {
 3    const btn = document.getElementById('btn');
 4    btn.onclick = () => {
 5        this.setState({ count: this.state.count + 1 });
 6        console.log(this.state.count); // 1
 7    };
 8}
 9render() {
10    return (
11        <>
12            <div>当前计数：{this.state.count}</div>
13            <button id="btn">add</button>
14        </>
15    );
16}`

2. setTimeout

如下代码，在生命周期componentDidMount函数中写了一个定时器setTimeout，在setTimeout内部将state中的count加1，并在此之后打印count的值，结果会打印最新的count值1。

setState虽然也是写在生命周期componentDidMount函数中的，但并不是直接写在componentDidMount里，而是套了一层setTimeout。这样，setState就表现出同步的形式。

复制 1`state = { count: 0 };
 2componentDidMount() {
 3    setTimeout(() => {
 4        this.setState({ count: this.state.count + 1 });
 5        console.log(this.state.count); // 1
 6    }, 0);
 7}
 8render() {
 9    return (
10        <>
11            <div>当前计数：{this.state.count}</div>
12            <button>add</button>
13        </>
14    );
15}`

4. setState的第二个参数

无论setState的对象式写法，还是函数式写法，都有第二个参数，为可选的回调函数，这个回调函数在状态更新完毕、界面也更新后（render调用后）才被调用。

如下代码所示，setState虽然直接在componentDidMount中调用，但在setState的回调函数中打印count的值，得到了最新的值1，因为回调函数在状态更新完毕后才被调用，当然能得到最新的count了。

复制 1state = { count: 0 };
 2componentDidMount() {
 3    this.setState({ count: this.state.count + 1 }, () => {
 4        console.log(this.state.count); // 1
 5    });
 6}
 7render() {
 8    return (
 9        <>
10            <div>当前计数：{this.state.count}</div>
11            <button>add</button>
12        </>
13    );
14}