在react中通過state以及setState() 來控制組件的狀態(tài)。
state
state 是 react 中用來存儲(chǔ)組件數(shù)據(jù)狀態(tài)的倦畅，可以類比成 vue 中的 data驰弄。
setState()
與 vue 中不同的是 state 不能直接被修改麻汰，需要通過 setState() 的方法去修改。
-
setState()更新組件狀態(tài)之后不會(huì)立即生效戚篙，react 為提高性能會(huì)按批次更新 state 然后 render, 即異步操作五鲫，所以setSate()之后立即去取state的值并不是更新之后的狀態(tài)。 -
setState()第一個(gè)參數(shù)接受兩種類型的參數(shù)已球，Object以及Function- Object
當(dāng)參數(shù)是Object的時(shí)候, 可以即為對(duì)應(yīng) state 中的 key, value 即是新的值臣镣。this.setState({ msg: '更新state msg' }) - Function
當(dāng)參數(shù)是函數(shù)的時(shí)候，setState()會(huì)將上一個(gè)setState()的結(jié)果作為參數(shù)傳入這個(gè)函數(shù)... constructor () { this.state = { counter: 0 } } add() { this.setState({ counter: this.state.counter + 1 }) this.setState({ counter: this.state.counter + 1 }) // 此時(shí)`this.state.counter`的值還是初始值0,智亮，所以這個(gè)操作是無效的 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 為上次更新之后的值忆某，即是1 } ...
- Object
-
setState()第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，表示 state 更新完成
根據(jù)這個(gè)可以使用Promise以及async/await,封裝成同步操作this.setState({ msg: '更新state msg' }, () => { console.log('state 更新完畢') })setStateAsync(state) { return new Promise(resolve => { this.setState(state, resolve) }) } // 使用 async add() { await setStateAsync({ counter: this.state.counter + 1 }) console.log('state 更新完畢') }
感謝您的閱讀阔蛉，本文由 趙的拇指 版權(quán)所有弃舒。原文地址： https://www.zhaofinger.com/detail/11
