需要绑定的原因
...................................................................................................
事件绑定目的，就是事件的作用域的转移。
问题是，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上，而是通过一种缓存的方式监听数据。
原文地址：https://www.cnblogs.com/mazhaokeng/p/9573146.html