這篇文章給大家分享的是有關如何處理react中setSate的異步問題的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到八宿網站設計與八宿網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網站、網站設計、外貿營銷網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋八宿地區(qū)。

我們先來看下react的官方對setSate的說明：

將setState()認為是一次請求而不是一次立即執(zhí)行更新組件的命令。為了更為可觀的性能，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節(jié)點中綁定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異步執(zhí)行的說法是錯誤的，更加準確的說法應該是setState不能保證同步執(zhí)行。

感謝各位的閱讀！關于如何處理react中setSate的異步問題就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：如何處理react中setSate的異步問題
文章URL：http://chinadenli.net/article18/jpsedp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、品牌網站建設、商城網站、企業(yè)建站、網站改版、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)