react中setState工作機制的示例分析

小編給大家分享一下react中setState工作機制的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

react 是單向數據流，若想要改變已有組件的外觀，我們只能通過更改組件的 props 或者更新組件的 state。在 react 項目的代碼中我們操作最多的就是 this.setState 方法。下面對 setState 方法進行詳細的說明。

<!--more -->

setState要點：react 框架為了提高性能，會對 state 的更新進行收集、合并、再進行一次批量的狀態更新。這種機制常常導致一些意想不到的情況。

setState 有兩種調用形式：

向 setState 傳遞對象
setState()并不會立即觸發 state 的更新。

//this.state.demo = 1;
handleClick = () => {
  this.setState({demo: 2});
  console.log(this.state.demo);// 1
}

1、?注意：在 addEventListener、setTimeout、ajax 回調中 this.setState 是立即觸發的。

2、setState 會合并更新，可能會造成狀態更新的丟失

handleClick = () => {
  this.setState({demo: this.state.demo + 1});
  this.setState({demo: this.state.demo + 1});
}
//click 之后 demo 為2而不是3

綜上：在同一代碼塊中不要多次調用 this.setState 方法

react 的 setState 還提供了另一種調用形式： this.setState(callbackFunc)

this.setState((previousState, currentProps) => {
  return { ...previousState, foo: currentProps.bar };
});

該語法和直接為 setState 傳遞對象不同,不會合并更新。

// demo + 1
handleSyncStateChange = () => {
  this.setState({
    demo: this.state.demo + 1
  });
  this.setState({
    demo: this.state.demo + 1
  });

}
// demo + 2
handleAsyncStateChange = () => {
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
}

refs

Async Nature Of setState

以上是“react中setState工作機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！