setState使用詳解

前面我們有使用過setState的基本使用, 接下來我們對(duì)setState使用進(jìn)行詳細(xì)的介紹

使用setState的原因

開發(fā)中我們并不能直接通過修改state的值來讓界面發(fā)生更新：

因?yàn)槲覀冃薷牧藄tate之后，希望React根據(jù)最新的State來重新渲染界面，但是this.state這種方式的修改React并不知道數(shù)據(jù)發(fā)生了變化；

React并沒有實(shí)現(xiàn)類似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式來監(jiān)聽數(shù)據(jù)的變化(也就是說React并沒有類似于Vue的數(shù)據(jù)劫持的)；

我們必須通過setState來告知React數(shù)據(jù)已經(jīng)發(fā)生了變化；

大家可能會(huì)有疑惑：在組件中并沒有實(shí)現(xiàn)setState的方法，為什么可以調(diào)用呢？

原因很簡(jiǎn)單，setState方法是從Component中繼承過來的。

我有找到對(duì)應(yīng)的源碼, 可以看到源碼中, setState是放在Component的原型上的

setState的基本用法

setState常見的用法

用法一: 直接在setState函數(shù)中傳入一個(gè)對(duì)象, 傳入的該對(duì)象會(huì)和this.state的對(duì)象進(jìn)行一個(gè)合并, 相同的屬性會(huì)進(jìn)行覆蓋, 修改完成后等待任務(wù)隊(duì)列批處理調(diào)用render函數(shù)實(shí)現(xiàn)頁面更新

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }
  
  changeText() {
    this.setState({
      message: "你好啊"
    })
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => {this.changeText()}}>按鈕</button>
      </div>
    )
  }
}

用法二: 在setState函數(shù)中傳入一個(gè)回調(diào)函數(shù), 要求傳入的回調(diào)函數(shù)返回一個(gè)對(duì)象, React內(nèi)部會(huì)將返回的這個(gè)對(duì)象和state對(duì)象進(jìn)行合并

這樣的做法有兩個(gè)好處:

好處一: 可以在該回調(diào)函數(shù)中, 編寫修改state數(shù)據(jù)的邏輯, 具有更強(qiáng)的內(nèi)聚性

好處二: 當(dāng)前回調(diào)函數(shù)會(huì)默認(rèn)將state和props傳入進(jìn)來, 我們可以在回調(diào)函數(shù)中直接獲取, 不需要再通過this.state或this.props的方式獲取;

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }
  
  changeText() {
    this.setState((state, props) => {
      // 可以直接在回調(diào)函數(shù)中獲取state和props
      console.log(state, props);

      // 對(duì)數(shù)據(jù)進(jìn)行操作的邏輯
      const message = state.message + "Hello React"

      // 該回調(diào)函數(shù)返回一個(gè)對(duì)象
      return {
        message
      }
    })
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => {this.changeText()}}>按鈕</button>
      </div>
    )
  }
}

setState的異步更新

setState的更新是異步的嗎？

我們來驗(yàn)證一下是否真的是異步的, 如下代碼, 在執(zhí)行完setState后, 我們立即打印一下message的結(jié)果

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }
  
  changeText() {
    // 用法一
    this.setState({
      message: "你好啊"
    })
    console.log(this.state.message) // Hello World
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => {this.changeText()}}>按鈕</button>
      </div>
    )
  }
}

打印結(jié)果為Hello World, 并不是修改后的結(jié)果, 可見setState是異步的操作，我們并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果

那么為什么setState設(shè)計(jì)為異步呢？

setState設(shè)計(jì)為異步其實(shí)之前在GitHub上也有很多的討論, 也有許多人會(huì)有同樣的疑惑；

React核心成員（Redux的作者）Dan Abramov也有對(duì)應(yīng)的回復(fù)，有興趣的同學(xué)可以參考一下；

https://github.com/facebook/react/issues/11527#issuecomment-360199710；

個(gè)人總結(jié)在Dan Abramov的回答中有說到設(shè)計(jì)為異步的兩個(gè)主要原因

原因一: setState設(shè)計(jì)為異步，可以顯著的提升性能；

我們知道調(diào)用setState會(huì)讓render函數(shù)重新執(zhí)行, 如果每次調(diào)用 setState都進(jìn)行一次更新，那么意味著render函數(shù)會(huì)被頻繁調(diào)用，界面重新渲染，這樣效率是很低的；

最好的辦法應(yīng)該是獲取到多個(gè)更新，之后進(jìn)行批量更新(或者說統(tǒng)一的更新)；

而React中的做法也是如此, 在一個(gè)時(shí)間段中, 會(huì)獲取多個(gè)更新, 再將多個(gè)更新放入一個(gè)任務(wù)隊(duì)列中, 再對(duì)任務(wù)隊(duì)列進(jìn)行批處理; 如果還有其他更新不在當(dāng)前時(shí)間段, 則在下一個(gè)時(shí)間段(或者其他時(shí)間段)的任務(wù)隊(duì)列中進(jìn)行批處理

例如下面代碼, 當(dāng)點(diǎn)擊按鈕時(shí), render函數(shù)只會(huì)執(zhí)行一次, 由此可見是有等待多個(gè)更新再進(jìn)行批處理的

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }
  
  changeText() {
    this.setState({
      message: "你"
    })
    this.setState({
      message: "你好"
    })
    this.setState({
      message: "你好啊"
    })
  }

  render() {
    console.log("render函數(shù)執(zhí)行")
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => {this.changeText()}}>按鈕</button>
      </div>
    )
  }
}

原因二: 如果同步更新了state，但是還沒有執(zhí)行render函數(shù)，那么state和props不能保持同步；

state和props不能保持一致性，會(huì)在開發(fā)中產(chǎn)生很多的問題；

例如一個(gè)數(shù)據(jù)message有被展示到頁面中, 并且傳入到子組件中展示, 此時(shí)通過setState修改message, 如果是同步的修改完成后, message的值就被改變了; 并且修改完成的后續(xù)代碼有報(bào)錯(cuò)的情況, 在這個(gè)時(shí)候再進(jìn)行調(diào)試的時(shí)候, 會(huì)出現(xiàn)頁面中message的值被修改掉, 而傳入到子組件的message并沒有修改的情況, 導(dǎo)致于state和props中的數(shù)據(jù)不一致

setState獲取異步結(jié)果

那么如何可以獲取到更新后的值呢？

方式一：setState的回調(diào)

setState接受兩個(gè)參數(shù)：第一個(gè)參數(shù)我們剛剛講解過了, 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在setState異步有了更新更新后會(huì)執(zhí)行；

格式如下：setState(partialState, callback)

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }
  
  changeText() {
    // 參數(shù)二回調(diào)函數(shù)可以保證拿到的數(shù)據(jù)是更新后的
    this.setState({ message: "你好啊" }, () => {
      console.log(this.state.message) // 你好啊
    })
  }

  render() {
    console.log("render函數(shù)執(zhí)行")
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
        <button onClick={() => {this.changeText()}}>按鈕</button>
      </div>
    )
  }
}

當(dāng)然，我們也可以在生命周期函數(shù)：

componentDidUpdate() {
  console.log(this.state.message);
}

setState一定是異步?

setState一定是異步操作嗎? 其實(shí)在React 18之前分成兩種情況：

情況一: 在組件生命周期或React的事件中，setState是異步；

情況二: 在setTimeout或者原生dom事件中，setState是同步；

changeText() {
  	// setTimeout
    setTimeout(() => {
      this.setState({ message: "你好啊" })
      console.log(message) // 你好啊
    }, 0);
  }

在原生dom事件回調(diào)和promise回調(diào), 都是同步的, 這里不再演示****

在React18之后，默認(rèn)所有的操作都被放到了批處理中（也就是默認(rèn)所有操作都是異步處理的）, 在官方文檔中有說明

在React 18之后, 如果希望代碼可以同步會(huì)拿到，則需要執(zhí)行特殊的flushSync操作:

注意: 使用flushSync需要在react-dom包里面導(dǎo)入

import { flushSync } from 'react-dom';

flushSync要求傳入一個(gè)回調(diào)函數(shù), 把要更新的數(shù)據(jù)放在回調(diào)函數(shù)中, 這樣就是同步的

flushSync(() => {
  this.setState({ message: "你好啊" })
})
// 這里獲取就是同步的
console.log(this.state.message) // 你好啊

到此這篇關(guān)于React中的setState使用細(xì)節(jié)和原理解析的文章就介紹到這了,更多相關(guān)React中setState使用原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！