setState 四种同步更新 this.state 方式

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，而是会合并多个setState进行异步更新，这样可以避免频繁更新DOM，提升性能

在开发中，有时候需要将setState变为同步更新，执行后拿到最新的this.state，有以下四种解决方案：

setState 的回调函数
绕过React通过原生JS 直接添加的事件处理函数
setTimeout/setInterval产生异步调用
async / await 封装后调用 (await 自动将后面操作转为 Promise)

Javascript

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = { num: 1 };
  }
  addAsync = () => { 
    this.setState({ num: this.state.num + 1 });
    console.log("async: ", this.state.num);
  };
 
  sync = () => {
    this.setState({ num: this.state.num + 1 }, () => { // 1
      console.log("sync: ", this.state.num);
    });
  };
 componentDidMount() {
    document.querySelector("#sync1").onclick = () => { // 2
      this.setState({ num: this.state.num + 1 });
      console.log("sync1: ", this.state.num);
    };
  }
  sync2 = () => { // 3
    setTimeout(() => {
      this.setState({ num: this.state.num + 1 });
      console.log("sync2: ", this.state.num);
    });
  };
  sync3 = async () => { // 4
    await this.setState({ num: this.state.num + 1 });
    console.log("sync3: ", this.state.num);
  };
  render() {
    return (
      <div>
        <p>{this.state.num}</p>
        <button onClick={this.addAsync}>async</button>
        <button onClick={this.sync}>sync</button>
        <button id="sync1">sync1</button>
        <button onClick={this.sync2}>sync2</button>
        <button onClick={this.sync3}>sync3</button>
      </div>
    );
  }
}

export default App;

参考代码： https://codesandbox.io/s/setstate-tongbudesichongfangshi-3d06k?file=/src/App.js

参考文章：

setState何时同步更新状态