React中setState的使用与同步异步的使用

2023-07-04 05:55:15 83

在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的两种方式有什么不同?

如果变更的state的值需要依赖于上一次的state的值，这种情况就需要用到函数的形式，比如以下这种情况

addCount(){
this.setState({count:this.state.count+1})
this.setState({count:this.state.count+1})
this.setState({count:this.state.count+1})
}

此时只会执行一次+1的操作，因为在React内部，会将多次setState合并操作，新的state由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是同步还是异步的?

☆☆☆☆☆是异步的

(1)即我们通过this.setState修改了状态之后，在它的下一行输出state的值并不会得到新的值

(2)为什么是异步?

有两个原因，一是提高效率，每次修改state的值都会造成render的重新渲染，将多次修改state的值合并统一更新可以提高性能；二是render的更新会晚一些，如果render中有子组件，子组件的props依赖于父组件的state，props和state就不能保持一致

(3)如何获取异步时的state值?
①在setState的回调函数中

this.setState({
count:this.state.count+1}},
()=>{console.log(this.state.count)})

②在componentDidUpdate中获取

componentDidUpdate(){
console.log(this.state.count)
}

☆☆☆☆☆是同步的

(1)即我们通过this.setState修改状态之后，在它的下一行输出state是新的值

(2)什么场景下是同步的?
①原生js获取dom元素，并绑定事件

点我+1
componentDidMount(){
constaddBtn=document.getElementById('addBtn')
changeBtn.addEventListener('click',()=>{
this.setState({count:this.state.count+1})
console.log(this.state.message)
})
}

②计时器setTimeout

this.addOne()}>点我+1
addOne(){
setTimeout(()=>{this.setState({count:this.state.count+1})
console.log(this.state.count)},0)
}

到此这篇关于React中setState的使用与同步异步的使用的文章就介绍到这了,更多相关ReactsetState同步异步内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

React中setState的使用与同步异步的使用

1、this.setState的两种定义方式

2、setState的两种方式有什么不同?

3、setState是同步还是异步的?

热门推荐

随机推荐