解讀react的setSate的異步問題

atinosun 發(fā)布于2019-08-23 16:16 / 3333人閱讀

摘要：總結在組件生命周期中或者事件綁定中，是通過異步更新的。在延時的回調或者原生事件綁定的回調中調用不一定是異步的。這個結果并不說明異步執(zhí)行的說法是錯誤的，更加準確的說法應該是不能保證同步執(zhí)行。

在我們閱讀文檔的時候，大多都說react的setState是異步的，可是它真的是異步的嗎？如果是，那我們還可以猜想：那可以不可以同步？那什么時候需要異步，什么時候需要同步呢？

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

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

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

// 初始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 ;
  }
  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.在div節(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

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

總結：
1.在組件生命周期中或者react事件綁定中，setState是通過異步更新的。
2.在延時的回調或者原生事件綁定的回調中調用setState不一定是異步的。

這個結果并不說明setState異步執(zhí)行的說法是錯誤的，更加準確的說法應該是setState不能保證同步執(zhí)行。

個人學習總結，有錯誤的地方歡迎指正??(???????)

云服務器 GPU云服務器 java異步問題異步通信的定義 listview的異步加載 ajax的異步請求

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102846.html

React專題：可變狀態(tài)

摘要：的參數(shù)既可以是一個對象，也可以是一個回調函數(shù)。回調函數(shù)提供了兩個參數(shù)，第一個參數(shù)就是計算過的對象，即便這時還沒有渲染，得到的依然是符合直覺的計算過的值。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象本文是『horseshoe·React專題』系列文章之一，后續(xù)會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個人博客獲得無與倫比的閱讀體驗 Reac...

hosition 2019-08-26 12:17 評論0 收藏0
《深入react技術棧》學習筆記（二）初入React世界

摘要：用于規(guī)范的類型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù)，通常是通過與用戶的交互來更改的。為了實現(xiàn)的修改，需要注冊事件處理程序到相應的元素上。當事件發(fā)生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數(shù)初始化狀態(tài)使用，，或其他數(shù)據(jù)存儲。前言上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態(tài)、屬...

MRZYD 2019-08-20 14:47 評論0 收藏0
react基礎學習記錄一

摘要：虛擬的構建在組件渲染到網(wǎng)頁前會執(zhí)行一個這個函數(shù)必須和一起使用該函數(shù)在組件更新完后會自動執(zhí)行，第三個參數(shù)是的返回值階段發(fā)生在組件的刪除前，會自動執(zhí)行，我們常用于清除組件之前被添加的還會繼續(xù)執(zhí)行的東西。 react 學習記錄自己學習，記錄便于后面回顧基礎知識點的記憶： state與props state是組件自己的數(shù)據(jù)，而props是父組件通過屬性賦值方式將其傳送給組件；這樣達到了，...

URLOS 2019-08-26 12:24 評論0 收藏0
React setState 簡單整理總結

摘要：區(qū)別在于傳入一個更新函數(shù)，就可以訪問當前狀態(tài)值。后面兩次會同步更新，分別輸出，很顯然，我們可以將次簡單規(guī)成兩類是一類中的又是一類，因為這兩次在不同的調用棧中執(zhí)行。寫業(yè)務代碼的時候需要經(jīng)常用到setState, 前幾天review代碼的時候，又想了一下這個API，發(fā)現(xiàn)對它的了解不是很清楚，僅僅是 setState 是異步的, 周六在家參考了一些資料，簡單整理了下，寫的比較簡單...

EdwardUp 2019-08-22 18:29 評論0 收藏0
React16 生命周期理解

摘要：完整生命周期初始化參數(shù)第一次渲染當父組件向子組件傳入發(fā)生改變后，依次調用子組件更新渲染當組件自身發(fā)生變化后組件再次更新渲染當組件卸載生命周期詳解此處請求接口數(shù)據(jù)子組件獲得新時觸發(fā)，作用是在子組件再次渲染前，更新子組件自身的，之后會觸發(fā)接受的完整生命周期 constructor(props) // 初始化參數(shù) componentWillMount() render() // 第一次...

Flands 2019-08-23 14:38 評論0 收藏0