react事件绑定--不再需要bind啦(es6)
2017-08-06 11:28
501 查看
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) };
第一次写博客,有啥写的不好或者不对的地方,欢迎一起讨论!共同成长!
相关文章推荐
- react合成事件的三种绑定方式bind
- React中ES6事件绑定相关事项
- React技巧8(不再手动绑定this,跟.bind(this)说88)
- Jquery中的bind(),on()绑定事件方式
- jQuery的三种bind/One/Live事件绑定使用方法
- jQuery三种事件绑定方式.bind(),.live(),.delegate()原理对比
- bind() unbind()绑定解绑事件
- 四,jquery事件绑定(bind)和取消事件(unbind)
- JQ中bind绑定多个事件类型
- React表单应用--事件响应和bind复用
- jQuery事件绑定on()、bind()与delegate() 方法详解
- Python3 Tkinter基础 Frame bind 绑定敲击键盘事件 将按键打印到Shell中
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
- jQuery事件绑定用法详解(附bind和live的区别)
- BIND?LIVE?DELEGATE?还是ON?–JQUERY事件绑定方法研究
- Jquery 的bind(), live(), delegate(), on()绑定事件方式
- jquery事件绑定$('.next')bind("click",function(){ });和$(".next").live("click",function(){});
- jquery事件绑定方式.bind() .live() .delegate()用法介绍
- jQuery事件绑定on()、bind()与delegate() 方法详解
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式