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視頻教程》