欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React中setState使用原理解析

 更新時間:2022年10月25日 14:51:44   作者:藍桉cyq  
這篇文章主要介紹了React中的setState使用細節(jié)和原理解析,主要包括使用setstate的原因及基本用法,本文通過實例代碼給大家詳細講解,需要的朋友可以參考下

setState使用詳解

前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹

使用setState的原因

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

因為我們修改了state之后,希望React根據(jù)最新的State來重新渲染界面,但是this.state這種方式的修改React并不知道數(shù)據(jù)發(fā)生了變化;

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

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

大家可能會有疑惑:在組件中并沒有實現(xiàn)setState的方法,為什么可以調(diào)用呢?

原因很簡單,setState方法是從Component中繼承過來的。

我有找到對應的源碼, 可以看到源碼中, setState是放在Component的原型上的

setState的基本用法

setState常見的用法

用法一: 直接在setState函數(shù)中傳入一個對象, 傳入的該對象會和this.state的對象進行一個合并, 相同的屬性會進行覆蓋, 修改完成后等待任務隊列批處理調(diào)用render函數(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ù)中傳入一個回調(diào)函數(shù), 要求傳入的回調(diào)函數(shù)返回一個對象, React內(nèi)部會將返回的這個對象和state對象進行合并

這樣的做法有兩個好處:

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

好處二: 當前回調(diào)函數(shù)會默認將state和props傳入進來, 我們可以在回調(diào)函數(shù)中直接獲取, 不需要再通過this.statethis.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);

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

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

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

setState的異步更新

setState的更新是異步的嗎?

我們來驗證一下是否真的是異步的, 如下代碼, 在執(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設計為異步呢?

setState設計為異步其實之前在GitHub上也有很多的討論, 也有許多人會有同樣的疑惑;

React核心成員(Redux的作者)Dan Abramov也有對應的回復,有興趣的同學可以參考一下;

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

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

原因一: setState設計為異步,可以顯著的提升性能;

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

最好的辦法應該是獲取到多個更新,之后進行批量更新(或者說統(tǒng)一的更新);

而React中的做法也是如此, 在一個時間段中, 會獲取多個更新, 再將多個更新放入一個任務隊列中, 再對任務隊列進行批處理; 如果還有其他更新不在當前時間段, 則在下一個時間段(或者其他時間段)的任務隊列中進行批處理

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

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不能保持一致性,會在開發(fā)中產(chǎn)生很多的問題;

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

setState獲取異步結(jié)果

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

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

setState接受兩個參數(shù):第一個參數(shù)我們剛剛講解過了, 第二個參數(shù)是一個回調(diào)函數(shù),這個回調(diào)函數(shù)會在setState異步有了更新更新后會執(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>
    )
  }
}

當然,我們也可以在生命周期函數(shù):

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

setState一定是異步?

setState一定是異步操作嗎? 其實在React 18之前分成兩種情況:

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

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

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

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

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

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

注意: 使用flushSync需要在react-dom包里面導入

import { flushSync } from 'react-dom';

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

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

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

相關文章

  • 在React中如何優(yōu)雅的處理事件響應詳解

    在React中如何優(yōu)雅的處理事件響應詳解

    這篇文章主要給大家介紹了關于在React中如何優(yōu)雅處理事件響應的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習學習吧。
    2017-07-07
  • React中Portals與錯誤邊界處理實現(xiàn)

    React中Portals與錯誤邊界處理實現(xiàn)

    本文主要介紹了React中Portals與錯誤邊界處理實現(xiàn),文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2021-07-07
  • 詳解react-native WebView 返回處理(非回調(diào)方法可解決)

    詳解react-native WebView 返回處理(非回調(diào)方法可解決)

    這篇文章主要介紹了詳解react-native WebView 返回處理(非回調(diào)方法可解決),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • react中antd Upload手動上傳的示例

    react中antd Upload手動上傳的示例

    本文主要介紹了react中antd Upload手動上傳的示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐記錄

    Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐記錄

    這篇文章主要介紹了Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • react-router-dom簡介(推薦)

    react-router-dom簡介(推薦)

    react-router包含三種類型的組件:路由組件、路由匹配組件?、導航組件,在你使用這些組件的時候,都必須先從react-router-dom引入,這篇文章主要介紹了react-router-dom簡介,需要的朋友可以參考下
    2022-12-12
  • React受控組件與非受控組件深入講解

    React受控組件與非受控組件深入講解

    具體來說這是一種react非受控組件,其狀態(tài)是在input的react內(nèi)部控制,不受調(diào)用者控制??梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關知識,感興趣的朋友一起看看吧
    2022-12-12
  • React Fiber中面試官最關心的技術話題

    React Fiber中面試官最關心的技術話題

    這篇文章主要為大家介紹了React Fiber中面試官最關心的技術話題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • react實現(xiàn)消息顯示器

    react實現(xiàn)消息顯示器

    這篇文章主要為大家詳細介紹了react實現(xiàn)消息顯示器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 在React Native中添加自定義字體的方法詳解

    在React Native中添加自定義字體的方法詳解

    在這篇指南中,我們將探索使用 Google Fonts 在 React Native 應用中添加自定義字體的方法,字體是優(yōu)秀用戶體驗的基石,使用定制字體可以為你的應用程序提供獨特的身份,需要的朋友可以參考下
    2024-02-02

最新評論