本文主要介绍了在React中setState的使用以及同步和异步的使用。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
在react中，如果直接用this.state修改状态，不会导致组件重新渲染，组件的属性需要通过this.setState修改。
1.this.setState的两个定义
定义初始状态
state={ count: 0 }，
如果这个时候有一个按钮，点击按钮，计数加1，我们可以写成两种方式。
(1)传递物体
this . setstate({ count:this . state . count 1 })
(2)传递函数
this.setState((state，props)=({ count: count 1}))
2.setState的两种方式有什么区别？
如果改变状态的值需要依赖于最后状态的值，这种情况需要采取函数的形式，如下。
addCount(){
this . setstate({ count:this . state . count 1 })
this . setstate({ count:this . state . count 1 })
this . setstate({ count:this . state . count 1 })
}
此时1的操作只会执行一次，因为在React内部，会合并多个setStates，通过合并Object.assgin({}，{count: 0}，{count: 1})得到新的状态。上面的赋值会执行三次，但是因为count的值没有更新，所以最后的结果只有1。如果setstate的赋值是一个函数，情况就不一样了。
addCount(){
this.setState((state，props)=({ count: count 1}))
this.setState((state，props)=({ count: count 1}))
this.setState((state，props)=({ count: count 1}))
}
这个操作会得到3的效果，因为React会做出判断。如果传入一个函数，就会执行这个函数，然后修改count的值。
3.setState是同步的还是异步的？
5星异步。
(1)即我们通过this.setState修改状态后，在其下一行输出state的值不会得到新的值。
(2)为什么是异步的？
原因有二。首先，为了提高效率，每次修改state的值时，都会重新渲染。多次合并和更新状态值可以提高性能。第二，render的更新会比较晚。如果render中有子组件，子组件的道具依赖于父组件的状态，道具和状态不能一致。
(3)异步时如何获取状态值？
1.在setState的回调函数中
this.setState({
count: this.state.count 1}}，
()={ console . log(this . state . count)})
2.在componentDidUpdate中获取它
componentDidUpdate(){
console.log(这个. state.count)
}
五星同步。
(1)也就是我们通过this.setState修改状态后，输出的状态就是它下一行的新值。
(2)在什么场景下同步？
1.原生js获取dom元素并绑定事件。
Button id=’addBtn ‘单击我1/button
componentidmount(){
const add BTN=document . getelementbyid(‘ add BTN ‘)
change BTN . addevent listener(‘ click ‘，()={
this . setstate({ count:this . state . count 1 })
console.log(this.state.message)
})
}
2.计时器超时
button onclick={ e=this . addone()}单击我1/button
addOne(){
setTimeout(()={ this . setstate({ count:this . state . count 1 })
console.log(this.state.count ) }，0)
}
关于setState的使用以及React中的同步和异步使用，本文到此结束。关于React setState的同步和异步使用的更多信息，请搜索Script House以前的文章或继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/article/207580.htm
