如何處理react中setSate的異步問(wèn)題

這篇文章給大家分享的是有關(guān)如何處理react中setSate的異步問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

我們先來(lái)看下react的官方對(duì)setSate的說(shuō)明：

將setState()認(rèn)為是一次請(qǐng)求而不是一次立即執(zhí)行更新組件的命令。為了更為可觀的性能，React可能會(huì)推遲它，稍后會(huì)一次性更新這些組件。React不會(huì)保證在setState之后，能夠立刻拿到改變的結(jié)果。

一個(gè)很經(jīng)典的例子：

// 初始state.count 當(dāng)前為 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

如果你熟悉react，你一定知道最后的輸出結(jié)果是0，而不是1。

我們?cè)賮?lái)看一個(gè)例子

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>點(diǎn)我</button>;
  }
  componentDidMount() {
    //手動(dòng)綁定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};

在這個(gè)組件中采用3中方法更新state

 1.在p節(jié)點(diǎn)中綁定onClick事件
 2.在componentDidMount中手動(dòng)綁定mousedown事件
 3.在componentDidMount中使用setTimeout調(diào)用onClick

在點(diǎn)擊組件后，你可以猜到結(jié)果嗎？輸出結(jié)果是：

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2

結(jié)果似乎有點(diǎn)出人意料，三種方式只有在p上綁定的onClick事件輸出了可以證明setState是異步的結(jié)果，另外兩種方式顯示setState似乎是同步的。

總結(jié)：
1.在組件生命周期中或者react事件綁定中，setState是通過(guò)異步更新的。
2.在延時(shí)的回調(diào)或者原生事件綁定的回調(diào)中調(diào)用setState不一定是異步的。

這個(gè)結(jié)果并不說(shuō)明setState異步執(zhí)行的說(shuō)法是錯(cuò)誤的，更加準(zhǔn)確的說(shuō)法應(yīng)該是setState不能保證同步執(zhí)行。

感謝各位的閱讀！關(guān)于如何處理react中setSate的異步問(wèn)題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！