這篇文章主要介紹了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 更新完毕')
}上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#如何將vue2.0 和animate.css合併在一起使用（詳細教程）
以上是在react中state和setState的使用方法（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
