你真的瞭解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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類