深入剖析setState同步异步机制

关于 setState

setState 的更新是同步还是异步，一直是人们津津乐道的话题。不过，实际上如果我们需要用到更新后的状态值，并不需要强依赖其同步/异步更新机制。在类组件中，我们可以通过 this.setState 的第二参数、 componentDidMount 、 componentDidUpdate 等手段来取得更新后的值；而在函数式组件中，则可以通过 useEffect 来获取更新后的状态。所以这个问题，其实有点无聊。

不过，既然大家都这么乐于讨论，今天我们就系统地梳理一下这个问题，主要分为两方面来说：

class-component
function-component

类组件中的 this.setState

在类组件中，这个问题的答案是多样的，首先抛第一个结论：

• 在 legacy 模式中，更新可能为同步，也可能为异步；
• 在 concurrent 模式中，一定是异步。

问题一、legacy 模式和 concurrent 模式是什么鬼？

• 通过 ReactDOM.render(<App />, rootNode) 方式创建应用，则为 legacy 模式，这也是 create-react-app 目前采用的默认模式；

• 通过 ReactDOM.unstable_createRoot(rootNode).render(<App />) 方式创建的应用，则为 concurrent模式 ，这个模式目前只是一个实验阶段的产物，还不成熟。

legacy 模式下可能同步，也可能异步？

是的，这不是玄学，我们来先抛出结论，再来逐步解释它。

this.setState
this.setState

实验代码如下：

class StateDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    render() {
        return <div>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () &