一文帶你掌握React類式組件中setState的應(yīng)用

更新時間：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 的設(shè)計是異步的

React 中 setState 的設(shè)計為什么是異步的，針對這一討論，Redux 的作者認為：setState 設(shè)計成異步，一方面可以顯著提升性能，這是因為 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é)果會在基礎(chǔ)上加 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 還是有很多奧秘的，其背后的設(shè)計思想是值得我們學習的，值的強調(diào)的是，React18 已經(jīng)全面擁抱函數(shù)式組件，React Hooks 已經(jīng)脫穎而出。

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

您可能感興趣的文章: