react关于事宜绑定this的四种体式格局

2024年4月23日 112次阅读 来源: 仅此而已

在react组件中，每一个要领的上下文都邑指向该组件的实例，即自动绑定this为当前组件,而且react还会对这类援用举行缓存，以到达cpu和内存的最大化。在运用了es6 class或许纯函数时，这类自动绑定就不复存在了，我们须要手动完成this的绑定
以下是几种绑定的要领:

bind要领
直接绑定是bind（this）来绑定，然则如许带来的问题是每一次衬着是都邑从新绑定一次bind；

class Home extends React.Component {

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

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

    render() {
        return (
            <div className="home">
                <span onClick={this.del.bind(this)}></span>
            </div>
        );
    }
}

组织函数内绑定
在组织函数 constructor 内绑定this，优点是仅须要绑定一次，防止每次衬着时都要从新绑定，函数在别处复用时也无需再次绑定

class Home extends React.Component {

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

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

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

    render() {
        return (
            <div className="home">
                <span onClick={this.del}></span>
            </div>
        );
    }
}

::不能传参
假如不传参数运用双冒号也是能够

class Home extends React.Component {

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

        };
    }

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

    render() {
        return (
            <div className="home">
                <span onClick={::this.del}></span>
            </div>
        );
    }
}

箭头函数绑定
箭头函数不仅是函数的’语法糖’，它还自动绑定了定义此函数作用域的this，由于我们不须要再对它们举行bind要领：

class Home extends React.Component {

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

        };

    }

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

    render() {
        return (
            <div className="home">
                <span onClick={this.del}></span>
            </div>
        );
    }
}

以上几种要领都能够完成this绑定，运用那种各自的习气；
愿望人人喜好，也愿望人人指导毛病，也能够到场qq群439667347，人人一同议论，一同提高，后续更新中…

    原文作者：仅此而已
    原文地址: https://segmentfault.com/a/1190000013609997
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞