setState是同步还是异步?
分两种情况
异步:在组件生命周期中或React合成事件里是异步进行操作
同步:在setimeout或者原生dom事件中是属于同步进行
class Demo extends Component{
constructor(props){
super(props);
this.state={
count:0,
msg:'测试'
}
}
render(){
return(
<h1>{this.state.msg}</h1>
)
}
componentDidMount(){
this.setState({
msg:'hello'
})
console.log(msg);//此时dom层中是hello,但是打印的时候为测试
}
}
为什么setState一般在React中使用异步
异步的好处
1.性能效率提高,一次性将所有state值赋予其中再进行render渲染
2.同步的话可能会影响到state和prop不数据不同步
setState如何同步使用?
this.setState({
msg:'您好!React'
},()=>{
console.log(msg);//此时打印中的值为您好!React
})
setState中的回调函数相当于Vue中的$nextTick
setState中的值被合并问题
componentDidMount(){
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
})
console.log(count);//此时打印为1
}
setState使用了三次count+1,为什么在执行后,值为1呢?
原理
setState的运行方法相当于,object.assign
进行赋值
第一次执行:object.assign({},{count:0},{count:1}) 此时值为1
第二次执行:object.assign({},{count:1},{count:1}) 此时值为1
第三次执行:object.assign({},{count:1},{count:1}) 此时值为1
如何才能不被合并进行累加
componentDidMount(){
this.setState((prevState,props)=>{
return(
count:prevState.count+1
)
})
this.setState((prevState,props)=>{
return(
count:prevState.count+1
)
})
this.setState((prevState,props)=>{
return(
count:prevState.count+1
)
})
console.log(count);//此时打印为3
}
此时通过setState内部函数执行,prevState代表上一次的值
网友评论