react中的setstate是什麼

在react中，setstate是用於更新元件狀態state的方法；setState()將對元件state的變更排入佇列，並通知React需要使用更新的state重新渲染此元件及其子組件，語法為「setState(物件,[回呼函數])」。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中的setstate是什麼

根據平常的使用來看，我們基本上會使用它來更新元件的狀態state。根據官方文件的解釋：

setState() 將對元件 state 的變更排入佇列，並通知 React 需要使用更新的 state 重新渲染此元件及其子元件。這是用於更新使用者介面以回應事件處理器和處理伺服器資料的主要方式.

將 setState() 視為請求而不是立即更新元件的命令。為了更好的感知效能，React 會延遲呼叫它，然後透過一次傳遞更新多個元件。 React 並不會保證 state 的變更會立即生效。

依其解釋，setState的作用是把元件的state更新任務排入任務佇列，而不是呼叫就立即更新state狀態，即將setState看做請求而不是立即更新元件的指令。所以在呼叫setState方法後就去取元件的state的值時，會取到沒有更新的值。

setState() 並不總是立即更新元件。它會批量推遲更新。這使得在調用 setState() 後立即讀取 this.state 成為了隱患。為了消除隱患，請使用 componentDidUpdate 或 setState 的回呼函數（setState(updater, callback)），這兩種方式都可以保證在應用程式更新後觸發。

使用

setState(updater, [callback]),

updater為傳回stateChange物件的函數: (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => { 
// 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

setState(stateChange, [callback])

stateChange為物件,

callback是可選的回呼函數, 在狀態更新且介面更新後才執行

this.setState({count: this.state.count + 1}), () => {
 // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

總結：

物件方式是函數方式的簡寫方式

如果新狀態不依賴原始狀態===> 使用物件方式

如果新狀態依賴原始狀態===> 使用函數方式

如果需要在setState()後取得最新的狀態資料, 在第二個callback函數中讀取

推薦學習：《react影片教學》

以上是react中的setstate是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！