深入解析react关于事件绑定this的四种方式
這篇文章主要介紹了詳解react關(guān)于事件綁定this的四種方式,寫的十分的全面細(xì)致,具有一定的參考價值,對此有需要的朋友可以參考學(xué)習(xí)下。如有不足之處,歡迎批評指正。
在react組件中,每個方法的上下文都會指向該組件的實(shí)例,即自動綁定this為當(dāng)前組件,而且react還會對這種引用進(jìn)行緩存,以達(dá)到cpu和內(nèi)存的最大化。在使用了es6 class或者純函數(shù)時,這種自動綁定就不復(fù)存在了,我們需要手動實(shí)現(xiàn)this的綁定
React事件綁定類似于DOM事件綁定,區(qū)別如下:
- 1.React事件的用駝峰法命名,DOM事件事件命名是小寫
- 2.通過jsx,傳遞一個函數(shù)作為event handler,而不是一個字符串。
- 3.React事件不能通過返回false來阻止默認(rèn)事件,需要顯式調(diào)用preventDefault() 如下實(shí)例:
ps:React組件類的方法沒有默認(rèn)綁定this到組件實(shí)例,需要手動綁定。 以下是幾種綁定的方法:
bind方法
直接綁定是bind(this)來綁定,但是這樣帶來的問題是每一次渲染是都會重新綁定一次bind;
class Home extends React.Component { constructor(props) {super(props);this.state = {};//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流:864305860} del(){console.log('del')} render() {return (<div className="home"><span onClick={this.del.bind(this)}></span></div>);} } 復(fù)制代碼構(gòu)造函數(shù)內(nèi)綁定
在構(gòu)造函數(shù) constructor 內(nèi)綁定this,好處是僅需要綁定一次,避免每次渲染時都要重新綁定,函數(shù)在別處復(fù)用時也無需再次綁定
class Home extends React.Component { constructor(props) {super(props);this.state = { };//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流:864305860this.del=this.del.bind(this)} del(){console.log('del')} render() {return (<div className="home"><span onClick={this.del}></span></div>);} } 復(fù)制代碼::不能傳參
如果不傳參數(shù)使用雙冒號也是可以
class Home extends React.Component { constructor(props) {super(props);this.state = { };//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流:864305860} del(){console.log('del')} render() {return (<div className="home"><span onClick={::this.del}></span></div>);} } 復(fù)制代碼箭頭函數(shù)綁定
箭頭函數(shù)不僅是函數(shù)的'語法糖',它還自動綁定了定義此函數(shù)作用域的this,因為我們不需要再對它們進(jìn)行bind方法:
class Home extends React.Component {constructor(props) {super(props);this.state = { }; //歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流:864305860} del=()=>{console.log('del')}render() {return (<div className="home"><span onClick={this.del}></span></div>);} } 復(fù)制代碼以上幾種方法都可以實(shí)現(xiàn)this綁定,使用那種各自的習(xí)慣;希望對大家的學(xué)習(xí)有所幫助
結(jié)語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費(fèi)的學(xué)習(xí)群,里面概括移動應(yīng)用網(wǎng)站開發(fā),css,html,webpack,vue node angular以及面試資源等。 對web開發(fā)技術(shù)感興趣的同學(xué),歡迎加入Q群:864305860,不管你是小白還是大牛我都?xì)g迎,還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享,同時每天更新視頻資料。 最后,祝大家早日學(xué)有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。
轉(zhuǎn)載于:https://juejin.im/post/5c150b36f265da61524d4979
總結(jié)
以上是生活随笔為你收集整理的深入解析react关于事件绑定this的四种方式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Taro+react开发(57) 图片引
- 下一篇: 《FLUENT 14流场分析自学手册》—