深入剖析setState同步异步机制

最新推荐文章于 2024-04-01 17:14:37 发布

AI乔治

最新推荐文章于 2024-04-01 17:14:37 发布

阅读量852

点赞数

分类专栏：架构 java 微服务文章标签： Java 架构微服务架构分布式

本文链接：https://blog.csdn.net/lanzhupi/article/details/112797474

版权

本文深入探讨React中的setState同步与异步行为，分析在类组件和函数式组件中如何处理状态更新。在legacy模式下，setState可能同步也可能异步，而在concurrent模式中，更新总是异步的。此外，文章还揭示了useState的setter函数在不同场景下的表现。

摘要由CSDN通过智能技术生成

关于 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 = () &