React事件绑定总结

须要绑定的缘由

 

　　事件绑定目的，就是事件的做用域的转移。

　　问题是，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，始终指向组件提供的值。

 

 

选择绑定方法的目的

 

　　绑定的方法有好多种，为何须要挑选呢？咱们首先要了解到：

• DOM 是一个独立于语言的文档接口 API。在浏览器中，该 API 是用 JavaScript 实现的。但浏览器一般把DOM 和 JavaScript 分开实现。因此每次 JavaScript 访问 DOM 都会伴随着巨大的开销。
• bind() 会建立一个绑定了做用域的函数实例。因而，从原型中实现一个实例，至关于拷贝了一份一样的函数，这是一种巨大的浪费。React想要把系统的方法关联到DOM上，咱们须要最优的方法进行绑定。

　　而React事件系统对DOM进行了改进，有一套高效的事件的

• 注册
• 存储
• 分发
• 重用

的机制，获得了优秀的效果：

• 事件委托：react组件声明的事件都会转换成DOM原生事件
• 事件冒泡：以队列的形式，能够回溯父组件
• 合成事件：并非单纯的使用DOM原生事件
• 对象池：合理管理事件对象，内存分配，垃圾回收

 

 

实现

• bind方法
• 每次从新渲染时，都会生成一个新的函数实例保存在listenerBank中
• 数量多时极其浪费内存。
• 若是是子组件的props，则会致使子组件从新渲染
• 用默认参数event来解决，如【箭头函数-函数上】，它们会在有event参数的状况下绑定到同一个函数上

<button onClick={this.handleEdit.bind(this, param)}>编辑</button>

• 箭头函数上调用
• 实际效果同bind方法，一样会形成从新绑定问题
• 能够带参数，可是须要把参数写两次，不划算

<button onClick={(param) => this.handleEdit(param)}>编辑</button>

• 构造器内部声明
• 官方推荐，虽然代码量多
• 事件只会生成一个

constructor(props){ super(props); this.handleEdit = this.handleEdit.bind(this); }

• 箭头函数声明
• 写法简单
• 只会生成一个
• 不能带参数，带参数就要写成bind方式

const handleEdit = (e) => { console.log(e) }

• 双冒号语法
• ::的意思是，绑定左值和右值
• 至关于.bind(this)，可是不能带参数，不推荐

<button onClick={::this.click}></button

 

当组件的事件数量极多时，用【构造器内部声明】方法，不然就牺牲性能来换取便捷，有参数就用【bind方法】，没有就用【箭头函数声明】。这是又一个性能与业务平衡的例子。

 

 

思考

 

• 为何在VUE中的事件不须要绑定？

<button v-on:click="say('what')">Say what</button

　　来看看官方原文：

　　印证了那句话：VUE是保时捷，react是组装车。

 

• jQuery须要事件绑定吗？

　　须要。可是为了避免破坏DOM的结构，并非直接绑定在DOM上，而是经过一种缓存的方式监听数据。