react關(guān)于事件綁定this的四種方式

張利勇發(fā)布于2019-08-22 15:12 / 1532人閱讀

摘要：在組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定為當(dāng)前組件而且還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到和內(nèi)存的最大化。

在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件,而且react還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到cpu和內(nèi)存的最大化。在使用了es6 class或者純函數(shù)時(shí)，這種自動(dòng)綁定就不復(fù)存在了，我們需要手動(dòng)實(shí)現(xiàn)this的綁定
以下是幾種綁定的方法:

bind方法
直接綁定是bind（this）來綁定，但是這樣帶來的問題是每一次渲染是都會(huì)重新綁定一次bind；

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

構(gòu)造函數(shù)內(nèi)綁定
在構(gòu)造函數(shù) constructor 內(nèi)綁定this，好處是僅需要綁定一次，避免每次渲染時(shí)都要重新綁定，函數(shù)在別處復(fù)用時(shí)也無需再次綁定

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
        this.del=this.del.bind(this)
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

::不能傳參
如果不傳參數(shù)使用雙冒號(hào)也是可以

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

箭頭函數(shù)綁定
箭頭函數(shù)不僅是函數(shù)的"語法糖"，它還自動(dòng)綁定了定義此函數(shù)作用域的this，因?yàn)槲覀儾恍枰賹?duì)它們進(jìn)行bind方法：

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };

    }

    del=()=>{
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

以上幾種方法都可以實(shí)現(xiàn)this綁定，使用那種各自的習(xí)慣；
希望大家喜歡，也希望大家指點(diǎn)錯(cuò)誤，也可以加入qq群439667347，大家一起討論，一起進(jìn)步，后續(xù)更新中...