react关于事件绑定this的四种方式

2024年4月16日 107次阅读 来源: 仅此而已

在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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞