當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

React中setState的使用與同步異步的使用

 2021-03-18 17:29  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

這篇文章主要介紹了React中setState的使用與同步異步的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在react中,修改狀態(tài)如果直接使用this.state,不會(huì)引起組件的重新渲染,需要通過(guò) this.setState來(lái)對(duì)組件的屬性進(jìn)行修改。

1、this.setState的兩種定義方式

定義初始狀態(tài)

state = { count: 0 },

如果此時(shí)有一個(gè)按鈕,點(diǎn)擊按鈕讓計(jì)數(shù)加1,我們可以有兩種寫法

(1)傳遞對(duì)象

this.setState({ count: this.state.count + 1})

(2)傳遞函數(shù)

this.setState((state, props) => ({ count: count + 1}))

2、setState的兩種方式有什么不同?

如果變更的state的值需要依賴于上一次的state的值,這種情況就需要用到函數(shù)的形式,比如以下這種情況

addCount(){
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
}

此時(shí)只會(huì)執(zhí)行一次+1的操作,因?yàn)樵赗eact內(nèi)部,會(huì)將多次setState合并操作,新的state由 Object.assgin({}, {count: 0}, { count: 1}) 合并所得,以上賦值會(huì)執(zhí)行三次,但因?yàn)閏ount的值沒(méi)有更新,所以最終執(zhí)行的結(jié)果只+1,如果setState的賦值是函數(shù),那情況就不一樣了

addCount(){
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
}

這樣的操作會(huì)得到+3的效果,因?yàn)镽eact會(huì)進(jìn)行判斷,如果傳入的是函數(shù),那么將執(zhí)行此函數(shù),此時(shí)count的值就已經(jīng)被修改了

3、setState是同步還是異步的?

5星是異步的

(1) 即我們通過(guò)this.setState修改了狀態(tài)之后,在它的下一行輸出state的值并不會(huì)得到新的值

(2) 為什么是異步?

有兩個(gè)原因,一是提高效率,每次修改state的值都會(huì)造成render的重新渲染,將多次修改state的值合并統(tǒng)一更新可以提高性能;二是render的更新會(huì)晚一些,如果render中有子組件,子組件的props依賴于父組件的state,props和state就不能保持一致

(3) 如何獲取異步時(shí)的state值?

1、在setState的回調(diào)函數(shù)中

this.setState({
count: this.state.count + 1}},
()=>{ console.log(this.state.count)})

2、 在componentDidUpdate中獲取

componentDidUpdate(){
console.log(this.state.count)
}

5星是同步的

(1) 即我們通過(guò)this.setState修改狀態(tài)之后,在它的下一行輸出state是新的值

(2) 什么場(chǎng)景下是同步的?

1、 原生js獲取dom元素,并綁定事件

<button id="addBtn">點(diǎn)我+1</button>
componentDidMount(){
const addBtn = document.getElementById('addBtn')
changeBtn.addEventListener('click',()=>{
this.setState({ count: this.state.count + 1})
console.log(this.state.message)
})
}

2、計(jì)時(shí)器 setTimeout

<button onClick={ e => this.addOne() }>點(diǎn)我+1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
console.log(this.state.count ) },0)
}

到此這篇關(guān)于React中setState的使用與同步異步的使用的文章就介紹到這了,更多相關(guān)React setState同步異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/article/207580.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦