React17 论 setState方法是同步还是异步？

周大胖子 · 发表于 2022-4-28 16:25:23

本帖最后由周大胖子于 2022-4-28 17:18 编辑

1. setState 方法是同步还是异步？

答：默认情况下setState 是异步函数，但是如果在定时器中使用或者原生事件中使用[ 注意生命周期函数不是原生函数原生函数指的是原生dom 所包含的函数，这里实际上我测了还是异步  ]，它就是同步的函数；

   这个问题先暂存，以后在实际中遇到了再来解决！！！！！！！！！！！

2. setState是异步方法的意义何在？

答：据说是因为渲染dom 比较消耗性能，所以是攒了一波一起改的意思，简单说明就是：优化性能；

3.如何拿到更新后的数据？

答： setState 有两个函数，({数据},fun)  在第二个参数也就是回调方法中就可以拿到更新后的数据

class A extends React.Component{
constructor(){
super();
this.state={
eat:'凉皮凉面',
num:123
}
}
// 注意点：如果通过events 来实现跨组件传递数据，那么为了性能考虑应当在组件被卸载时移除掉对应的事件
componentWillUnmount(){
eventBus.rawListeners('say',this.fuA.bind(this));
}
render(){
return (
<section>
这是A模块{this.state.eat}
<hr />
<button onClick={()=>{this.testState()}}> 测试setState同步异步按钮 </button>
<hr />
<button id={"tt"}> 找一个原生事件 </button>
<hr />
<button onClick={()=>{this.testState2()}}>测试setState同步写法</button>
{this.state.num}
</section>
);
}
componentDidMount(){
// this.setState({
// num:777
// })
// console.log('在周期函数中运行',this.state.num)// 这里也是异步
// eventBus.addListener('say',this.fuA.bind(this));
let oBtn = document.getElementById('tt');
oBtn.onclick=()=>{
this.setState({
num:999
})
console.log('原生事件中运行',this.state.num)// 这里是同步额这里居然是异步？？？为毛做的跟别人不一样
}
}
fuA(eat){
this.setState({
eat
})
}
testState(){
this.setState({
num:666
},()=>{
console.log('回调函数中运行',this.state.num)
})
console.log('上下文书写运行',this.state.num) // 这里是异步数据为修改之前的
}
testState2(){
this.setState((preState,props)=>{
return {
num:preState.num+857
}
})
this.setState((preState,props)=>{
return {
num:preState.num+857
}
})
console.log('当setState第一个值是函数时',this.state.num) // 可能是我的打印方式有问题，这还是个异步不过上述的文字执行起来没问题
}
}

复制代码