1、setTimeout
class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次 log->0
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次 log->0
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次 log->2
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次 log->3
}, 0);
}
render() {
return null;
}
};
由于setTimeout关系 ，setTimeout是独立的且不同时的宏任务(task) 更新state时 所以能够直接进行同步更新，所以连着输出 2，3。
2、prevState
incrementCount(){
this.setState((prevState, props) => ({
count: prevState.count + 1
}));
this.setState((prevState, props) => ({
count: prevState.count + 1
}));
}
3、addListener 原生监听
4、async await
Promise来封装setState:
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}
async componentDidMount() {
await this.setStateAsync({count: 1});
console.log(this.state.count);//输出count=1
}
