先说一下结论:
同步代码块中 | 异步代码块中 |
---|---|
异步 | 同步 |
在非事件回调和setTimeout下,比如react的生命周期中,setState 的代码是异步执行的。
componentDidMount() {
console.log(this.state.val); // 0
this.setState({
val: this.state.val + 1,
});
console.log(this.state.val); // 0 在这个同步代码块中,知道最你也拿不到变更后的状态
}
如果你的setState是被setTimeout包裹的,或者是事件函数中的回调fn,那setState就会被同步的执行。且不会被合并执行,会导致组件被渲染多次。
componentDidMount() {
setTimeout(() => {
console.log(this.state.val); // 0
this.setState({
val: this.state.val + 1,
});
console.log(this.state.val); // 1
}, 0);
}
值得注意的是,在异步中执行多少次setState就会触发多少次render,所以为了性能考虑,通常建议在代码块结束的时候统一setState,避免中间不必要的render