React事件绑定总结
发布时间:2020-12-15 20:24:05 所属栏目:百科 来源:网络整理
导读:需要绑定的原因 ................................................................................................... 事件绑定目的,就是事件的作用域的转移。 问题是,react生成出来的组件,this还不能指向自身吗? button onClick={ this .plus}plus/
需要绑定的原因
...................................................................................................
事件绑定目的,就是事件的作用域的转移。
问题是,react生成出来的组件,this还不能指向自身吗?
<button onClick={this.plus}>plus</button>
plus函数上的this,是事件响应时的上下文(window),并不是当前组件实例!
先来看看bind方法的定义:“
bind() 方法创建一个新的函数, 当这个新函数被调用时其
this 置为提供的值”,什么意思呢,看代码:
var module = { x: 42,getX: function() { return this.x; } } var unboundGetX = module.getX; console.log(unboundGetX()); // 调用的对象是window,所以里面的this.x => window.x // expected output: undefined var boundGetX = unboundGetX.bind(module); console.log(boundGetX()); // 但是bind之后,会将this的值置为module提供的值 // expected output: 42 所以代码修改为?this.plus.bind(this)之后,不过执行时的上下文是什么,函数的内部的this,始终指向组件提供的值。
?
选择绑定方法的目的
...................................................................................................
绑定的方法有好多种,为什么需要挑选呢?我们首先要了解到:
而React事件系统对DOM进行了改进,有一套高效的事件的
的机制,得到了优秀的效果:
?
实现
...................................................................................................
<button onClick={this.handleEdit.bind(this,param)}>编辑</button>
<button onClick={(param) => this.handleEdit(param)}>编辑</button>
constructor(props){ super(props); this.handleEdit = this.handleEdit.bind(this); }
const handleEdit = (e) => {
console.log(e)
}
<button onClick={::this.click}></button
?
当组件的事件数量极多时,用【构造器内部声明】方法,否则就牺牲性能来换取便捷,有参数就用【bind方法】,没有就用【箭头函数声明】。这是又一个性能与业务平衡的例子。
?
思考
...................................................................................................
<button v-on:click="say(‘what‘)">Say what</button
来看看官方原文
印证了那句话:VUE是保时捷,react是组装车。
?
需要。但是为了不破坏DOM的结构,并不是直接绑定在DOM上,而是通过一种缓存的方式监听数据。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |