本人入门React不久,有错误请指出
React17及其之前版本中:
export default class App extends Component {
state = {
count: 1
}
render() {
return (
<div>
{this.state.count}
<button onClick={this.handleAdd1}>add1</button>
<button onClick={this.handleAdd2}>add2</button>
</div>
)
}
handleAdd1 = () => {
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
}
handleAdd2 = () => {
setTimeout(() => {
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
this.setState({
count: this.state.count + 1
})
console.log(this.state.count);
}, 0)
}
}
初始:
点击add1一次:
可以发现结果并不是想象中的点击add1,count连续加3次,而是合并更新一次。
React可能会出于性能的考虑,将多个setState调用合并成一个批处理更新操作
因此setState在同步的逻辑中是异步更新,异步更新Dom的
setState接受一个回调函数。如果想在更新完状态之后在进行操作,可以把处理逻辑放在回调函数中,这样就可以确保更新完成之后再进行处理
handleAdd1 = () => {
this.setState({
count: this.state.count + 1
}, () => {
// 回调中状态和真实Dom已经更洗完了
console.log(this.state.count);
})
this.setState({
count: this.state.count + 1
}, () => {
console.log(this.state.count);
})
this.setState({
count: this.state.count + 1
}, () => {
console.log(this.state.count);
})
}
如下图:可以发现setState仍会合并,但是可以确保在状态更新完之后
因此可以得出结论:setState接受第二个参数,第二个参数是一个回调函数,回调中状态和Dom更新完后就会被触发
但是点击add2就不一样了
点击add2后,count连续加了三次,并没有合并。
handeAdd2中setState是处在定时器中的,是处在异步逻辑中的,因此setState在异步的逻辑中是同步执行,同步更新状态和Dom。
官网参考:setState