由于 setState 是异步的，它是否通过回调队列执行?

Question

我是 React 的新手，在幕后学习了 setState 的工作原理。因此，我想就此提出一些问题。首先，setState 总是异步的吗？如果不是在什么一般情况下它是同步的。其次，在 setState 中异步是如何发生的，它是通过 Web api 然后回调队列执行的吗？伙计们，如果有什么不清楚的地方，请告诉我。我只是真的需要你的帮助。

Answer 1

是的。 它始终是异步的，从不同步。 开发人员的常见错误是这样的

handleEvent(newValue) {
this.setState({ value: newValue }, () => {
// you can get the updated state here
console.log(this.state.value)
})
this.doSomething(newValue)
}
doSomething(newValue) {
// this.state.value is still the old value
if (this.state.value === newValue) {
// blabla
}
}

而且您无法确定状态更新需要多少时间。

Answer 2

React setState 并不总是异步的，这取决于状态更改是如何触发的。

1( 同步 - 如果操作在 Reactjs 世界之外，或者状态更改是由计时器或用户诱导的事件处理程序触发的，则 reactjs 无法批量更新，必须立即改变状态。

2( 异步 如果状态更改是由 onClick 触发的，则 Reactjs 可以批量更新状态以提高性能。

工作代码沙盒链接

和

参考帖子

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
counter: 0
};
componentDidMount() {
// const intervalId = setInterval(this.updateState, 5000);
// this.setState({intervalId: intervalId});
this.counter.addEventListener("mousedown", this.updateState);
}
componentWillUnmount() {
this.counter.removeEventListener("mousedown", this.updateState);
// clearInterval(this.state.intervalId);
}
updateState = event => {
console.log("= = = = = = = = = = = =");
console.log("EVENT:", event ? event.type : "timer");
console.log("Pre-setState:", this.state.counter);
this.setState({
counter: this.state.counter + 1
});
console.log("Post-setState:", this.state.counter);
};
render() {
return (
<div className="App">
<span onClick={this.updateState} ref={elem => (this.counter = elem)}>
Counter at {this.state.counter}
</span>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

控制台日志

= = = = = = = = = = = =
EVENT: mousedown 
Pre-setState: 
0
Post-setState: 
1
= = = = = = = = = = = = 
EVENT: click 
Pre-setState: 
1
Post-setState: 
1

正如您在控制台日志中看到的那样，mousedown事件状态更改会立即反映出来onClick但更改是异步的，或者最好说是批处理的。

因此，我们最好假设状态更改将是异步的，并使用回调处理程序来避免错误。 当然，回调中的任何内容都将通过 javascript 中的事件循环。

希望有帮助!!

Answer 3

是的。 它是异步的。在Javascript中，异步操作使用event loop

https://www.youtube.com/watch?v=8aGhZQkoFbQ