快捷導(dǎo)航

React?中?setState?的異步操作案例詳解

更新時(shí)間：2022年08月30日 10:20:04 作者：鹿魚(yú)

這篇文章主要介紹了React中setState的異步操作案例詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一點(diǎn)點(diǎn)參考價(jià)值，感興趣的小伙伴可以參考一下

前言

在使用state的時(shí)候，如果我們企圖直接修改state中的某一個(gè)值之后直接打?。ㄊ褂茫┧?，就會(huì)發(fā)現(xiàn)，他其實(shí)并沒(méi)有改變。

就像下面的例子，企圖通過(guò)點(diǎn)擊事件之后就使用修改之后的state的值，但是會(huì)發(fā)state中的并沒(méi)有被立即修改，還是原先的值，我們都知道那是因?yàn)?setState就相當(dāng)于是一個(gè)異步操作，不能立即被修改。

import React, { Component } from 'react';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '今天是七夕節(jié)'
    };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({
      name: '跟你這只單身狗有什么關(guān)系'
    })
    console.log(this.state.name)
  }

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.handleClick}>點(diǎn)擊查看</button>
      </div>
    )
  }
}

還是只能獲取到之前的值。但是我們就是想要立即獲取，咋整呢

第一種：

這個(gè)回調(diào)函數(shù)會(huì)在修改了state之后才會(huì)執(zhí)行，這就可以使用修改之后的state的值。

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '今天是七夕節(jié)'
    };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({
      name: '跟你這只單身狗有什么關(guān)系'
    }, () => {
      console.log(this.state.name)
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.handleClick}>點(diǎn)擊查看</button>
      </div>
    )
  }
}

第二種：

操作異步函數(shù)，用 async / await

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '今天是七夕節(jié)'
    };
    this.handleClick = this.handleClick.bind(this)
  }
  async handleClick() {
    await this.setState({
      name: '跟你這只單身狗有什么關(guān)系'
    })
    console.log(this.state.name)
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.handleClick}>點(diǎn)擊查看</button>
      </div>
    )
  }
}

第三種：

setstate 可以接收一個(gè)回調(diào)函數(shù)，而不是一個(gè)對(duì)象，這個(gè)回調(diào)函數(shù)有兩個(gè)參數(shù)，一個(gè)是接收前一個(gè)狀態(tài)值作為第一個(gè)參數(shù)，并將更新后的值作為第二個(gè)參數(shù)。

import React, { Component } from 'react';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '今天是七夕節(jié)'
    };
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState(() => {
      return {
        name: `跟你這只單身狗有什么關(guān)系`
      }
    }, () => {
      console.log(this.state.name)
    })
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <button onClick={this.handleClick}>點(diǎn)擊查看</button>
      </div>
    )
  }
}

還可以拿到之前的值，進(jìn)行修改

handleClick() {
  this.setState((prevState) => {
    return {
      name: `${prevState.name}，但是跟你這只單身狗有什么關(guān)系`
    }
  }, () => {
    console.log(this.state.name)
  })
}

react中 state的值在修改了之后并不會(huì)立即被修改，setState通過(guò)一個(gè)隊(duì)列機(jī)制實(shí)現(xiàn)state的更新。當(dāng)執(zhí)行setState時(shí)，會(huì)把需要更新的state合并后放入狀態(tài)隊(duì)列，而不會(huì)立刻更新this.state，利用這個(gè)隊(duì)列機(jī)制可以高效的批量的更新state。

setState之后不會(huì)立馬觸發(fā)更新，它會(huì)根據(jù)當(dāng)前isBatchingUpdate 判斷是否處于批量更新中，如果當(dāng)前isBatchingUpdate為true,說(shuō)明處于批量更新中，它會(huì)將要更新的值放入到一個(gè)隊(duì)列中，隨后將要更新的組件放入dirtyComponent中，當(dāng)本次批量更新結(jié)束后，會(huì)將isBatchingUpdate中設(shè)置為false,開(kāi)啟本次的批量更新，情況隊(duì)列，會(huì)用object.assign()將多次更新進(jìn)行一個(gè)合并。 react會(huì)開(kāi)啟一個(gè)事務(wù)機(jī)制，進(jìn)行dom diff算法等來(lái)進(jìn)行跟新。

React 中的 setState 為什么需要異步操作？

保持內(nèi)部一致性：props 的更新是異步的，因?yàn)閞e-render父組件的時(shí)候，傳入子組件的props才變化；為了保持?jǐn)?shù)據(jù)一致，state也不直接更新，都是在flush的時(shí)候更新
將state的更新延緩到最后批量合并再去渲染對(duì)于應(yīng)用的性能優(yōu)化是有極大好處的，如果每次的狀態(tài)改變都去重新渲染真實(shí) DONM，那么它將帶來(lái)巨大的性能消耗
立即更新回來(lái)視覺(jué)上的不適應(yīng)，比如在頁(yè)面打開(kāi)時(shí)候，多個(gè)請(qǐng)求發(fā)布導(dǎo)致頻繁更改Loading 狀態(tài)，會(huì)導(dǎo)致 Loading 圖標(biāo)閃爍