建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)如何處理react中setSate的異步問題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到八宿網(wǎng)站設(shè)計與八宿網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋八宿地區(qū)。
我們先來看下react的官方對setSate的說明：
將setState()認為是一次請求而不是一次立即執(zhí)行更新組件的命令。為了更為可觀的性能，React可能會推遲它，稍后會一次性更新這些組件。React不會保證在setState之后，能夠立刻拿到改變的結(jié)果。
一個很經(jīng)典的例子：
// 初始state.count 當前為 0
componentDidMount(){
this.setState({count: state.count + 1});
console.log(this.state.count)
}如果你熟悉react，你一定知道最后的輸出結(jié)果是0，而不是1。
我們再來看一個例子
class Demo extends Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
render() {
return ;
}
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節(jié)點中綁定onClick事件 2.在componentDidMount中手動綁定mousedown事件 3.在componentDidMount中使用setTimeout調(diào)用onClick
在點擊組件后，你可以猜到結(jié)果嗎？輸出結(jié)果是：
timeout prev state: 0 next state: 1 mousedown prev state: 1 next state: 2 click prev state: 2 next state: 2
結(jié)果似乎有點出人意料，三種方式只有在p上綁定的onClick事件輸出了可以證明setState是異步的結(jié)果，另外兩種方式顯示setState似乎是同步的。
總結(jié)：
1.在組件生命周期中或者react事件綁定中，setState是通過異步更新的。
2.在延時的回調(diào)或者原生事件綁定的回調(diào)中調(diào)用setState不一定是異步的。
這個結(jié)果并不說明setState異步執(zhí)行的說法是錯誤的，更加準確的說法應(yīng)該是setState不能保證同步執(zhí)行。
感謝各位的閱讀！關(guān)于如何處理react中setSate的異步問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
文章標題：如何處理react中setSate的異步問題
分享URL：http://fisionsoft.com.cn/article/jpsedp.html
