在react中state和setState的使用方法（詳細教學）

這篇文章主要介紹了react學習筆記之state以及setState的使用,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

在react中透過 state 以及 setState() 來控制元件的狀態。

state

state 是 react 中用來儲存元件資料狀態的，可以類比成 vue 中的 data。

1.state的作用

state是React中元件的一個物件.React把使用者介面當做是狀態機,想像它有不同的狀態然後渲染這些狀態,可以輕鬆讓使用者介面與資料一致.

React中,更新元件的state,會導致重新渲染使用者介面(不要操作DOM).簡單來說,就是使用者介面會隨著state變化而變化.

2.state工作原理

常用的通知React資料變化的方法是呼叫setState(data,callback).這個方法會合併data到this .state,並重新渲染元件.渲染完成後,呼叫可選的

callback回呼.大部分情況不需要提供callback,因為React會負責吧介面更新到最新狀態.

setState()

與vue 中不同的是state 不能直接被修改，需要透過setState() 的方法去修改。

1、setState() 更新元件狀態之後不會立即生效，react 為提高效能會按批次更新state 然後render, 即非同步操作，所以setSate() 之後立即去取state的值並不是更新之後的狀態。

2、setState() 第一個參數接受兩種型別的參數，Object以及Function

#Object

this.setState({
 msg: '更新state msg'
})

當參數是Object的時候, 可以即為對應state 中的key, value 即是新的值。

Function

當參數是函數的時候，setState() 會將上一個setState() 的結果作為參數傳入這個函數

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

setState() 第二個參數是一個回呼函數，表示state 更新完成

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

根據這個可以使用Promise以及async/await,封裝成同步操作

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在微信小程如何使用swiper元件實作圖片切換顯示

在vue2.0中有哪些常用的UI 庫？

在C#中如何實作將一個字元轉換為整數

#如何將vue2.0 和animate.css合併在一起使用（詳細教程）

以上是在react中state和setState的使用方法（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！