面试官：react中的setState()是同步还是异步？如何证明(1)

最新推荐文章于 2024-10-04 17:00:22 发布

2401_83977357

最新推荐文章于 2024-10-04 17:00:22 发布

阅读量395

点赞数 4

分类专栏： 2024年程序员学习文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2401_83977357/article/details/137281470

版权

2024年程序员学习专栏收录该内容

201 篇文章 0 订阅

订阅专栏

本文解释了React中的setState方法为何是异步的，以及如何利用回调函数和传递函数的方式实现多次setState的顺序执行。作者还分享了在不同场景下管理组件状态的方法，包括使用函数式更新和回调处理以确保状态更新的正确性。

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

}

addNumber(){ //数量+1

this.setState({number:this.state.number + 1})

console.log(this.state.number,‘add----’)

}

render(){

return (

{this.state.number}

数量+1

)

}

export default Parent

在this.setState()下面打印this.state.number，观察其结果

打印结果为0，说明在执行console.log()的时候state的状态还没被改变，证明这时候setState是异步的。再举一个更明显的例子，修改上面的addNumber()：

addNumber(){ //数量连续+1

this.setState({number:this.state.number + 1})

console.log(this.state.number,‘add 3----’)

}

看上面的例子，感觉像会打印出3，结果并不是：

页面显示与打印结果对比上面只执行一次的代码，结果相同，why?

为什么会是异步？机制决定，react会识别setState，把自己能够“控制”的setState集中操作（批量操作），在一个事件函数中，不管setState()被调用多少次，他们会在函数执行结束以后，统一被归结为一次染重新渲，这样做可以优化性能，不至于每次setState()一次就渲染一次。所以在函数内的setState()是有序的，如果要更改同一个state，像上面的3次更改同一个state，最后被调用的总会覆盖之前的，相当于只改变1次，导致最后页面渲染的值是1而不是3。由于这个批量操作机制，也使得setState表现为异步的。（优化性能，减少资源损耗）

什么情况下表现了异步？

react中的合成事件或者钩子函数里面，如像上面的addNumber()、constructor()，也可以浅显理解成在react里面的事件函数，是因为这种常规情景下react “知道”什么时候退出该事件，什么时候进行更新，也就是上面所说的“控制”。

那么既然是异步，且批量操作，那么怎样修改同个state还能让其都生效呢（即下一次的修改依据上一次的结果，而不是被覆盖）？

有一种方式可以实现，即在setState()传入一个函数，将state（可以理解成上一次的state）作为参数，根据上一次state改变当前state：

addNumber(){ //数量+1

this.setState((state)=>({number:state.number + 1})) //传入一个函数，state作为参数

this.setState((state)=>({number:state.number + 1}))

console.log(this.state.number,‘add 3----’)

}