react事件绑定--不再需要bind啦(es6)

react事件绑定–不再需要bind啦(es6)

今天看到网友提到在react的render函数中不建议使用bind绑定方法,因为这样每次render都会进行一次bind操作消耗性能.
下面用到的这个方法结合es6就可以摆脱bind的绑定问题,不多说,直接上代码

代码

代码块语法遵循标准markdown代码,例如:

    class Test entends React.Component {
        constructor () {
            super();
            this.state = {};
        };
        // 带参数的事件绑定
        handleClick = (params) => {
            console.log(params);
        };
        // 不带参数的事件绑定
        click =()=> {
            console.log('可以直接拿到this:'+this);
        }
        render () {
            return {
                <div>
                    <div onClick={ e => {this.handleClick(params)} }>绑定</div>
                    <div onClick={ this.click }>绑定</div>
                </div>
            };
        };
    }

结合es6并不需要在this.state中声明this.click就可以拿到this,但是handleClick和click方法必须要箭头函数声明,普通方法不可以像这样:click () { console.log(this) };


第一次写博客,有啥写的不好或者不对的地方,欢迎一起讨论!共同成长!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值