這篇文章帶給大家的內容是關於react的setSate的非同步問題的分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在我們閱讀文件的時候，大多都說react的setState是異步的，可是它真的是異步的嗎？如果是，那我們還可以猜想：那可以不可以同步？那什麼時候需要異步，什麼時候需要同步呢？
我們先來看下react的官方對setSate的說明：
將setState()認為是一次請求而不是一次立即執行更新元件的命令。為了更可觀的性能，React可能會推遲它，稍後會一次更新這些組件。 React不會保證在setState之後，能夠立刻拿到改變的結果。
一個很經典的例子：
// 初始state.count 当前为 0
componentDidMount(){
this.setState({count: state.count + 1});
console.log(this.state.count)
}如果你熟悉react，你一定知道最後的輸出結果是0，而不是1。
我們再來看一個例子
class Demo extends Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
render() {
return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
}
componentDidMount() {
//手动绑定mousedown事件
this.refs.button.addEventListener(
"mousedown",
this.onClick.bind(this)
);
//setTimeOut
setTimeout(this.onClick.bind(this), 1000);
}
onClick(event) {
if (event) {
console.log(event.type);
} else {
console.log("timeout");
}
console.log("prev state:", this.state.number);
this.setState({
number: this.state.number + 1
});
console.log("next state:", this.state.number);
}
}
export {Demo};在這個元件中採用3中方法更新state
1.在p节点中绑定onClick事件 2.在componentDidMount中手动绑定mousedown事件 3.在componentDidMount中使用setTimeout调用onClick
在點擊元件後，你可以猜到結果嗎？輸出結果是：
timeout prev state: 0 next state: 1 mousedown prev state: 1 next state: 2 click prev state: 2 next state: 2
結果似乎有點出人意料，三種方式只有在p上綁定的onClick事件輸出了可以證明setState是異步的結果，另外兩種方式顯示setState似乎是同步的。
總結：
1.在元件生命週期中或react事件綁定中，setState是透過非同步更新的。
2.在延時的回調或原生事件綁定的回呼中呼叫setState不一定是異步的。
這個結果並不說明setState非同步執行的說法是錯誤的，更準確的說法應該是setState不能保證同步執行。
這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！
#以上是react的setSate的非同步問題的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
