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/babel-standalone@6.15.0/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/babel-standalone@6.15.0/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/babel-standalone@6.15.0/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 都保證為最新。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於this，你真的了解嗎? 你真的了解Java對象嗎 HttpPostedFile 和 HttpPostedFileBase 你真的了解嘛？高並發，你真的了解嗎？你真的了解URL encode嗎？你真的了解UINavigationController嗎？你真的了解UIView嗎？你真的了解UIResponder嗎？你真的了解UIControl嗎？你真的了解UITabBarController嗎？