在react中，setstate是用于更新組件狀態(tài)state的方法；setState()將對(duì)組件state的更改排入隊(duì)列，并通知React需要使用更新后的state重新渲染此組件及其子組件，語法為“setState(對(duì)象,[回調(diào)函數(shù)])”。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中的setstate是什么

根據(jù)平時(shí)的使用來看，我們基本上會(huì)使用它來更新組件的狀態(tài)state。根據(jù)官方文檔的解釋：

setState() 將對(duì)組件 state 的更改排入隊(duì)列，并通知 React 需要使用更新后的 state 重新渲染此組件及其子組件。這是用于更新用戶界面以響應(yīng)事件處理器和處理服務(wù)器數(shù)據(jù)的主要方式.

將 setState() 視為請(qǐng)求而不是立即更新組件的命令。為了更好的感知性能，React 會(huì)延遲調(diào)用它，然后通過一次傳遞更新多個(gè)組件。React 并不會(huì)保證 state 的變更會(huì)立即生效。

按其解釋，setState的作用是把組件的state更新任務(wù)排入任務(wù)隊(duì)列，而不是調(diào)用就立即更新state狀態(tài)，即將setState看做請(qǐng)求而不是立即更新組件的命令。所以在調(diào)用setState方法后就去取組件的state的值時(shí)，會(huì)取到?jīng)]有更新的值。

setState() 并不總是立即更新組件。它會(huì)批量推遲更新。這使得在調(diào)用 setState() 后立即讀取 this.state 成為了隱患。為了消除隱患，請(qǐng)使用 componentDidUpdate 或者 setState 的回調(diào)函數(shù)（setState(updater, callback)），這兩種方式都可以保證在應(yīng)用更新后觸發(fā)。

使用

setState(updater, [callback]),

updater為返回stateChange對(duì)象的函數(shù): (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => {  // 在狀態(tài)更新且界面更新之后回調(diào)         console.log('test3 setState callback()', this.state.count)       })

setState(stateChange, [callback])

stateChange為對(duì)象,

callback是可選的回調(diào)函數(shù), 在狀態(tài)更新且界面更新后才執(zhí)行

this.setState({count: this.state.count + 1}), () => {  // 在狀態(tài)更新且界面更新之后回調(diào)         console.log('test3 setState callback()', this.state.count)       })

總結(jié)：

對(duì)象方式是函數(shù)方式的簡寫方式

如果新狀態(tài)不依賴于原狀態(tài) ===> 使用對(duì)象方式

如果新狀態(tài)依賴于原狀態(tài) ===> 使用函數(shù)方式

如果需要在setState()后獲取最新的狀態(tài)數(shù)據(jù), 在第二個(gè)callback函數(shù)中讀取

推薦學(xué)習(xí)：《react視頻教程》