import React, { Component } from "react";
export default class AsyncState extends Component {
state = {
count: 0,
};
//React 有个概念,叫做batchUpdate(批量更新)
handleClick = () => {
//batchedUpdating = true(开始)
//18:这部分是异步的 17:也是异步的
this.setState({ count: 1 });
console.log("this.state.count:", this.state.count);
this.setState({ count: 2 });
console.log("this.state.count:", this.state.count);
//setTimeout不参与batchedUpdating过程
setTimeout(() => {
//18:这部分是异步的 17:同步的
this.setState({ count: 3 });
console.log("this.state.count:", this.state.count); //2,3
this.setState({ count: 4 });
console.log("this.state.count:", this.state.count); //2,4
}, 0);
//batchedUpdating = false(结束)
};
render() {
return (
<div>
<h5>{this.state.count}</h5>
<button onClick={this.handleClick}>click</button>
</div>
);
}
}