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

发布时间:2019-06-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react关于事件绑定this的四种方式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在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,大家一起讨论,一起进步,后续更新中...

脚本宝典总结

以上是脚本宝典为你收集整理的react关于事件绑定this的四种方式全部内容,希望文章能够帮你解决react关于事件绑定this的四种方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。