您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“React組件中的state和setState如何使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React組件中的state和setState如何使用”吧!
狀態(tài)(state)即數(shù)據(jù),是組件內(nèi)部的私有數(shù)據(jù),只能在組件內(nèi)部使用
state的值是對象,可以通過this.state來獲取狀態(tài)。
狀態(tài)是可變的,可以通過this.setState({要修改的數(shù)據(jù)})來改變狀態(tài)
注意:跟vue語法不同,不要直接修改state中的值,這時錯誤的!
//正確 this.setState({ count:this.state.count+1 }) //錯誤 this.state.count+=1
最后結(jié)合以上內(nèi)容,寫了一個簡單的累加器,但是在此之前,我們需要解決this在自定義的方法中的指向問題,否則this指向會為undefined,我們一般希望this指向組件實例。
1.箭頭函數(shù)
利用箭頭函數(shù)自身不綁定this的特點(diǎn)
class App extends React.Component{ state={ count:0, } render(){ // 箭頭函數(shù)中的this指向外部韓靜,此處指向render()方法 return ( <div> <span>總數(shù):{this.state.count}</span> <button onClick={()=>{ this.setState({ count:this.state.count+1 }) }}>點(diǎn)擊+1</button> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root'));
但是這種方法會導(dǎo)致JSX語法中代碼過于繁雜,不利于表明項目結(jié)構(gòu),一般不推薦使用。
2.Function.prototype.bind()
利用ES5中的bind方法,將事件處理程序中的this與組件示例綁定到一起
class App extends React.Component{ constructor(){ super()//super()必須寫,這時ES6語法中class的一個要求 //此時可將state放到constructor()中 this.state={ count:0, } this.add=this.add.bind(this)//將this指向綁定到實例 } //事件處理程序 add(){ this.setState({ count:this.state.count+1 }) } render(){ // 箭頭函數(shù)中的this指向外部韓靜,此處指向render()方法 return ( <div> <span>總數(shù):{this.state.count}</span> <button onClick={this.add}>點(diǎn)擊+1</button> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root'));
3.class的示例方法
利用箭頭函數(shù)形式的class實例方法,此方法比較簡潔,強(qiáng)烈推薦
注意:該語法是實驗性語法,但是由于腳手架中babel的存在,可以直接使用
class App extends React.Component{ state={ count:0, } add=()=>{ this.setState({ count:this.state.count+1 }) } render(){ // 箭頭函數(shù)中的this指向外部韓靜,此處指向render()方法 return ( <div> <span>總數(shù):{this.state.count}</span> <button onClick={this.add}>點(diǎn)擊+1</button> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root'));
到此,相信大家對“React組件中的state和setState如何使用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。