你真的瞭解setState()嗎？

来源:https://www.cnblogs.com/dreamcc/archive/2019/08/25/11409053.html
-Advertisement-
Play Games

React 中 setState()詳細解讀 對於 setState() 相信伙伴們都用過，它是 React 官方推薦用來更新組件 state 的 API，但是對於 setState() 你真的瞭解嗎？且待我慢慢詳聊一番。 setState() 官方用法指南 語法1： updater：函數類型，返回 ...


React 中 setState()詳細解讀

對於 setState() 相信伙伴們都用過，它是 React 官方推薦用來更新組件 state 的 API，但是對於 setState() 你真的瞭解嗎？且待我慢慢詳聊一番。

setState() 官方用法指南

語法1： setState(updater[, callback])

  • updater：函數類型，返回一個更新後的 state 中的狀態對象，它會和 state 進行淺合併。

  • callback： 可選，回調函數。

語法2： setState(stateChange[, callback])

  • setState: 對象類型，會將傳入的對象淺層合併到新的 state 中。

  • callback：可選，回調函數。

對於這兩種形式，不同的是第一個參數選擇問題，可以選擇一個函數返回一個新的state對象，亦可以直接選擇一個對象應用於狀態更新，那麼啥時候選擇函數類型的參數，什麼時候選擇對象類型的呢？這裡可以總結兩句話：

  • 當前狀態更新無需依賴之前的state狀態時，選擇對象類型參數

  • 當前更新狀態依賴之前的狀態時，選擇函數類型參數

example：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>setState詳解</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class A extends React.Component {
      state = {
        count: 0
      }
      update1 = () => {
        this.setState({count: this.state.count+1})
      }

      update2 = () => {
        this.setState(state => ({
          count: state.count+1
        }))
      }

      update3 = () => {
        this.setState({
          count: 8
        })
      }  

      render () {
        return (
          <div>
            <h1>{this.state.count}</h1>
            <button onClick={this.update1} style={{marginRight: 15}}>測試1</button><button style={{marginRight: 15}} onClick={this.update2}>測試2</button><button onClick={this.update3}>測試3</button>
          </div>         
        )
      }
    }
    ReactDOM.render(
    <A/>,
    document.getElementById('app')
    )
  </script>
</body>
</html>

這個例子中，我們通過點擊按鈕測試1或測試2來改變組件 A 的 count 狀態值，因為每次修改狀態都是在原先基礎上加 1， 所以在setState 中適合選擇函數類型參數，即 update2 寫法推薦。

點擊 測試3 按鈕會直接將count 值修改為 固定值 8，這無需依賴上一次count狀態值，所以在setState 中適合選擇對象類型參數，即 update3 寫法推薦。

setState() 更新狀態一定是非同步的嗎？

我們知道setState() 會觸發組件render() 函數，重新渲染組件將更新後的內容顯示在視圖上，那麼在 setState() 之後我們立馬就能獲取到最新的state值嗎？

這裡涉及到一個 setState() 是非同步更新還是同步更新的問題？

結論：

  • 在React相關的回調函數中setState() 是非同步更新

  • 不在React 相關的回調中setState() 是同步更新

React 相關的回調包括：組件的生命周期鉤子，React 組件事件監聽回調。

React不相關的回調包括常見的：setTimeout(), Promise()等。

我們還是可以拿之前的按鈕點擊實例來測試。

example：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>setState詳解</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class A extends React.Component {
      state = {
        count: 0
      }
      update1 = () => {
        this.setState({count: this.state.count+1})
        console.log(this.state.count)
      }

      update2 = () => {
        setTimeout(() => {
          this.setState(state => ({
            count: state.count+1
          }))
          console.log(this.state.count)
        })
      }

      update3 = () => {
        Promise.resolve().then(value => {
          this.setState({
            count: 8
          })
          console.log(this.state.count)
        })
      }

      componentWillMount () {
        this.setState(state => ({
          count: state.count+1
        }))
        console.log(this.state.count)
      }

      render () {
        console.log('render()', this.state.count)
        return (
          <div>
          <h1>{this.state.count}</h1>
            <button onClick={this.update1} style={{marginRight: 15}}>測試1</button><button style={{marginRight: 15}} onClick={this.update2}>測試2</button><button onClick={this.update3}>測試3</button>
          </div>         
        )
      }
    }
    ReactDOM.render(
    <A/>,
    document.getElementById('app')
  )
  </script>
</body>
</html>

我們在 React 事件監聽回調 update1 和 組件生命周期 componentWillMount() 鉤子裡面分別在setState()之後列印最新的 state 值，發現列印出來的還是修改之前的state，但是頁面已經更新為最新狀態，看圖：

採用同樣的方法我們可以觀察在 update2 的setTimeout() 和 update3 的 Promise() 回調中，setState() 後列印的是最新的state值，而且這個列印會在setState() 觸發組件重新render() 之後。經過測試，恰好驗證了我們的結論是正確的，在React 相關的回調中setState()是非同步更新狀態，在不相關的回調中 setState() 是同步更新狀態。

setState() 非同步更新狀態時，如何獲取最新的狀態值？

這個問題其實是針對當setState() 非同步更新狀態之後，怎麼立馬獲取到最新的狀態值，也就是上面例子我們說的在update1() 和componentWillMount()中怎麼列印出最新的state值。

答案其實非常簡單，也就是我們說到的setState()傳參的第二個callback() 參數。setState() 的第二個回調會在更新狀態之後，組件重新render() 之後調用，也就是這裡面我們可以獲取到最新的狀態值。

代碼：


...

update1 = () => {
  this.setState({count: this.state.count+1}, () => {
    console.log(this.state.count)
  })
}

componentWillMount () {
  this.setState(state => ({
    count: state.count+1
  }), () => {
      console.log(this.state.count)
  })
}

這樣，我們同樣可以在update1 和 componentWillMount() 中 列印出最新的state值。

遇到重覆多次調用setState()，React如何處理？

這裡我們討論的前提當然是setState() 非同步更新狀態時候，因為同步更新，我們調用幾次 setState()，就會觸發幾次 render鉤子，當然也會實時分別列印出更新後的狀態值。

結論：

這裡分兩種情況討論：

  • 當setState() 傳對象類型參數，React會合併重覆多次的調用setState()，觸發一次render。

  • 當setState() 傳函數類型參數，React會依次多次的調用setState()，觸發一次render。

可以看到，我們多次重覆調用setState()，不管是傳參是何種類型。React都只會調用一次 render，重新渲染組件。

我們可以同樣以按鈕點擊實例來測試我們結論。

example：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>setState詳解</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class A extends React.Component {
      state = {
        count: 0
      }
      update1 = () => {
        // this.setState({count: this.state.count+1}, () => {
        //   console.log(this.state.count)
        // })
        // this.setState({count: this.state.count+1}, () => {
        //   console.log(this.state.count)
        // })
        // this.setState({count: this.state.count+1}, () => {
        //   console.log(this.state.count)
        // })
        this.setState((state) => ({
          count: state.count+1
        }), () => {
          console.log(this.state.count)
        })
        this.setState((state) => ({
          count: state.count+1
        }), () => {
          console.log(this.state.count)
        })
        this.setState((state) => ({
          count: state.count+1
        }), () => {
          console.log(this.state.count)
        })
      }

      update2 = () => {
        setTimeout(() => {
          this.setState(state => ({
            count: state.count+1
          }))
          console.log(this.state.count)
          this.setState(state => ({
            count: state.count+1
          }))
          console.log(this.state.count)
          this.setState(state => ({
            count: state.count+1
          }))
          console.log(this.state.count)
        })
      }

      update3 = () => {
        Promise.resolve().then(value => {
          this.setState({
            count: 8
          })
          console.log(this.state.count)
        })
      }

      componentWillMount () {
        this.setState(state => ({
          count: state.count+1
        }))
        console.log(this.state.count)
      }

      render () {
        console.log('render()', this.state.count)
        return (
          <div>
          <h1>{this.state.count}</h1>
            <button onClick={this.update1} style={{marginRight: 15}}>測試1</button><button style={{marginRight: 15}} onClick={this.update2}>測試2</button><button onClick={this.update3}>測試3</button>
          </div>         
        )
      }
    }
    ReactDOM.render(
    <A/>,
    document.getElementById('app')
  )
  </script>
</body>
</html>

當點擊測試按鈕2，因為setState() 是同步更新狀態，可以發現組件進行了多次render調用，分別依次列印出更新後的狀態值，這個很簡單。

我們點擊測試按鈕1，分別對傳給setState()參數不同進行了測試，發現當傳參是對象類型時候，React會合併重覆setState()調用，也就是只更新一次state狀態，傳函數類型參數時候，則分別進行了計算更新。

無論以哪種方式傳參重覆調用 setState() ，React 都只會進行一次render 調用，這也是性能優化的一部分，防止多次重覆渲染帶來的性能問題。

其實官網推薦我們使用setState()時候，第一個參數傳函數類型參數，因為函數參數中接收的 state 和 props 都保證為最新。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載32-背景顏色、背景圖片、背景填充
    一、背景 1.如何設置標簽的背景顏色 （1）在CSS中有一個background-color：屬性值；，就是專門用來設置標簽的背景顏色。 （2）取值：具體單詞、RGB、RGBA、十六進位 例子： 2.如何設置背景圖片？ （1）在CSS中有一個叫做background-image:url();的屬性， ...
  • Typescript使用字元串聯合類型代替枚舉類型
    TypeScript宗旨 我覺得Typescript的宗旨是 任何一個 TypeScript 程式，在手動刪去類型部分，將尾碼改成 .js 後，都應能夠正常運行。Typescript是javascript的超集，是編譯期行為，不引入額外開銷，不改變運行時行為，始終與 ESMAScript 語言標準一 ...
  • 重讀《學習JavaScript數據結構與演算法-第三版》- 第6章 鏈表（一）
    定場詩 前言 本章為重讀《學習JavaScript數據結構與演算法》的系列文章，該章節主要講述數據結構 鏈表，以及實現鏈表的過程和原理。 鏈表 鏈表 ，為什麼要有這種數據結構呢？當然，事出必有因！ 數組 最常用、最方便的數據結構， But ，當我們從數組的起點或中間插入或移動項的成本很高，因為我們需要 ...
  • 微信群免費發佈網址
    微信群免費發佈網址 http://www.weixintuiguang.com.cn/ ...
  • 超簡單的js實現提示效果彈出以及延遲隱藏的功能
    自動登錄勾選提示效果 要求:滑鼠移入顯示提示信息框；滑鼠離開,信息框消失，消失的效果延遲 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="w ...
  • 博客園markdown編輯器代碼摺疊
    ``` ``` ...
  • reduce方法的使用
    reduce（收斂）：接收一個回調函數作為累加器，數組中的每個值（從左到右）開始縮減，最終為一個值，是ES5中新增的又一個數組逐項處理方法。 reduce（callback,initialValue） callback（一個在數組中每一項上調用的函數，接受四個函數：） previousValue（上 ...
  • 簡易萬年曆
    簡易萬年曆這個案例是比較有意義的，雖然是個小demo，但涵蓋的知識是一點也不少啊！需要靜下心來好好理解，完全理解下來，就會覺得也沒那麼難，理解了這個demo，後續很多東西都知道怎麼寫了。好啦，先上HTMl部分的代碼。 樣式可以自己更改哈！ 下麵是javascript的代碼，會加上註釋，以防小白白看不 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類