React中setState的異步操作怎么實現

這篇文章主要介紹了React中setState的異步操作怎么實現的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React中setState的異步操作怎么實現文章都會有所收獲，下面我們一起來看看吧。

前言

在使用state的時候， 如果我們企圖直接修改state中的某一個值之后直接打印（使用）他，就會發現，他其實并沒有改變。

就像下面的例子，企圖通過點擊事件之后就使用修改之后的state的值，但是會發state中的并沒有被立即修改，還是原先的值，我們都知道那是因為 setState就相當于是一個異步操作，不能立即被修改。

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

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

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

第一種：

這個回調函數會在修改了state之后才會執行，這就可以使用修改之后的state的值。

import React, { Component } from 'react';

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

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

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

第二種：

操作異步函數，用 async / await

import React, { Component } from 'react';

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

第三種：

setstate 可以接收一個回調函數，而不是一個對象，這個回調函數有兩個參數，一個是接收前一個狀態值作為第一個參數，并將更新后的值作為第二個參數。

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

還可以拿到之前的值，進行修改

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

react中 state的值在修改了之后并不會立即被修改，setState通過一個隊列機制實現state的更新。當執行setState時，會把需要更新的state合并后放入狀態隊列，而不會立刻更新this.state，利用這個隊列機制可以高效的批量的更新state。

 setState之后不會立馬觸發更新，它會根據當前isBatchingUpdate 判斷是否處于批量更新中，如果當前isBatchingUpdate為true,說明處于批量更新中，它會將要更新的值放入到一個隊列中，隨后將要更新的組件放入dirtyComponent中，當本次批量更新結束后，會將isBatchingUpdate中設置為false,開啟本次的批量更新，情況隊列，會用object.assign()將多次更新進行一個合并。 react會開啟一個事務機制，進行dom diff算法等來進行跟新。

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

• 保持內部一致性：props 的更新是異步的，因為re-render父組件的時候，傳入子組件的props才變化；為了保持數據一致，state也不直接更新，都是在flush的時候更新

• 將state的更新延緩到最后批量合并再去渲染對于應用的性能優化是有極大好處的，如果每次的狀態改變都去重新渲染真實 DONM，那么它將帶來巨大的性能消耗

• 立即更新回來視覺上的不適應，比如在頁面打開時候，多個請求發布導致頻繁更改Loading 狀態，會導致 Loading 圖標閃爍

什么時候setState會進行同步操作？

setState只在合成事件和鉤子函數中是“異步”的，在原生事件和setTimeout 中都是同步的。

關于“React中setState的異步操作怎么實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React中setState的異步操作怎么實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。