一文帶你掌握React類式組件中setState的應用

更新時間：2024年02月29日 10:30:09 作者：進擊的松鼠

這篇文章主要為大家詳細介紹了介紹了React類式組件中setState的三種寫法以及簡單討論下setState?到底是同步的還是異步的,感興趣的可以了解下

在 React 類式組件中，我們并不能直接通過修改 state 的值來讓頁面發(fā)生更新，而是必須通過 setState 的方式讓 React 重新渲染頁面，setState 來自于哪里呢？來自于繼承 React 的 Component 類中，例如定義一個 App 類： class App extends Component ，在類中我們可以直接通過 this.setState 的方式來修改 state 的值，并讓其調(diào)用 render 函數(shù)重新渲染頁面。

setState 的三種寫法

基本方式

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    // 方式一：最基本的使用方式
    this.setState({
      title: "React類組件"
    })
  }
  
  render() {
    const { title } = this.state

    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

setState 可以傳入一個回調(diào)函數(shù)

作用：

可以在回調(diào)函數(shù)中編寫新的 state 的邏輯。
當前的回調(diào)函數(shù)會將之前的 state 和 props 傳遞進來。

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    // 方式二：在setState中傳入回調(diào)函數(shù)
    this.setState((state, props) => {
      // 可以獲取之前的 state 和 props 值
      console.log(state.title, props)
      // 可以編寫一些新的對state處理的邏輯
      return {
        title: state.title + "Native"
      }
    }
  }
  
  render() {
    const { title } = this.state
    
    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

setState 在 React 的事件處理中是一個異步調(diào)用

我們并不能在執(zhí)行完 setState 之后立馬拿到最新的 state 的結(jié)果，可以在 setState 中傳入第二個參數(shù)： callback 回調(diào)函數(shù)，用來獲取數(shù)據(jù)更新之后(數(shù)據(jù)合并)的最新值。

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    // 方式三：通過 setState 方法的第二個參數(shù), 通過回調(diào)函數(shù)拿到更新后的值
    this.setState({ title: 'Redux' }, () => {
      console.log("在回調(diào)函數(shù)中獲取更新后的值:", this.state.title) // Redux
    })
    console.log('因為異步獲取的還是原來的值', this.state.title) // React
  }
  
  render() {
    const { title } = this.state
    
    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

setState 的設計是異步的

React 中 setState 的設計為什么是異步的，針對這一討論，Redux 的作者認為：setState 設計成異步，一方面可以顯著提升性能，這是因為 React 每次調(diào)用 setState 都會進行一次更新，render 函數(shù)就會被頻繁的調(diào)用，頁面頻繁的被渲染，為了解決這一問題，批量的進行更新是最得體的方法；另一方面可以使 state 和 props 保持同步，因為存在一種情況，如果同步更新 state，這時還沒有執(zhí)行 render 函數(shù)，state 和 props 不能保持同步。

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

    this.state = {
      count: 0
    }
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    console.log(this.state.count) // 1
  }

  render() {
    const { count } = this.state

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={e => this.increment()}>count+1</button>
      </div>
    )
  }
}

點擊增加按鈕后 count 值變?yōu)?1，因為 setState 默認是一個異步的方法，默認會收集一段時間內(nèi)所有的更新，然后再統(tǒng)一更新 React。出于性能考慮，React 會把多個 setState() 調(diào)用合并成一個調(diào)用，所以點擊按鈕之后 count值為 1，再次點擊其結(jié)果會加 1 變?yōu)?2。

其原理就是通過 Object.assign() 方法對舊 state 和更改后的 state 進行一個合并。

要解決合并這個問題，可以讓 setState() 接收一個函數(shù)而不是一個對象。

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

    this.state = {
      count: 0
    }
  }

  increment() {
    this.setState((state) => {
      return {
        count: state.count + 1
      }
    })
    this.setState((state) => {
      return {
        count: state.count + 1
      }
    })
    this.setState((state) => {
      return {
        count: state.count + 1
      }
    })
    console.log(this.state.count) // 3
  }

  render() {
    const { count } = this.state

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={e => this.increment()}>count+1</button>
      </div>
    )
  }
}

點擊增加按鈕后 count 值變?yōu)?3，再次點擊其結(jié)果會在基礎上加 3 變?yōu)?6。

setState 到底是同步的還是異步的

React18 版本之前，在組件生命周期或 React 合成事件中，setState 是異步的；在 setTimeout 或者原生 dom 事件中，setState 是同步的。

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    setTimeout(() => {
      // 在react18之前, setTimeout中setState操作, 是同步操作
      this.setState({
        title: 'React學習筆記'
      })
      console.log(this.state.title) // ReactReact學習筆記
    }, 0)
  }
  
  render() {
    const { title } = this.state
    
    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

React18版本之后，所有操作默認都是異步處理的。

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    setTimeout(() => {
      // 在react18之后, setTimeout中setState異步操作(批處理)
      this.setState({
        title: 'React學習筆記'
      })
      console.log(this.state.title) // React
    }, 0)
  }
  
  render() {
    const { title } = this.state
    
    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

但是官方表示可以通過 flushSync 函數(shù)獲取到同步的結(jié)果。

import React, { Component } from 'react'
import { flushSync } from 'react-dom'

export class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      title: "React"
    }
  }
  
  changeText() {
    setTimeout(() => {
      // 執(zhí)行flushSync函數(shù)就可以拿到同步結(jié)果
      flushSync(() => {
        this.setState({ title: 'React學習筆記' })
      })
      console.log(this.state.title) // React學習筆記
    }, 0)
  }
  
  render() {
    const { title } = this.state
    
    return (
      <div>
        <h1>title: {title}</h1>
        <button onClick={e => this.changeText()}>修改標題</button>
      </div>
    )
  }
}

由此我們可以總結(jié)出 React 中的 setState 還是有很多奧秘的，其背后的設計思想是值得我們學習的，值的強調(diào)的是，React18 已經(jīng)全面擁抱函數(shù)式組件，React Hooks 已經(jīng)脫穎而出。

到此這篇關于一文帶你掌握React類式組件中setState的應用的文章就介紹到這了,更多相關React類式組件setState內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React優(yōu)化子組件render的使用
這篇文章主要介紹了React優(yōu)化子組件render的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
react如何實現(xiàn)表格多條件搜索
這篇文章主要介紹了react如何實現(xiàn)表格多條件搜索問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React中的for循環(huán)解讀
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
React Hooks獲取數(shù)據(jù)實現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據(jù),文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-10-10
React Redux應用示例詳解
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下
2022-11-11
antd中form表單的wrapperCol和labelCol問題詳解
最近學習中遇到了些問題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關于antd中form表單的wrapperCol和labelCol問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02
React 狀態(tài)的不變性實例詳解
這篇文章主要為大家介紹了React 狀態(tài)的不變性實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
react如何添加less環(huán)境配置
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問題及解決方案，結(jié)合示例代碼圖文給大家介紹的非常詳細，需要的朋友參考下吧
2022-05-05
React 使用browserHistory項目訪問404問題解決
這篇文章主要介紹了React 使用browserHistory項目訪問404問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
React不能將useMemo設置為默認方法原因詳解
這篇文章主要為大家介紹了React不能將useMemo設置為默認方法原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
2022-07-07