這篇文章主要介紹了詳解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í)例：

<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a>class ActionLink extends React.Component { constructor(props) { super(props); }handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：864305860render() { return ( <a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a> ); }} 復(fù)制代碼

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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。