react 中事件处理的三种方法，以及为什么事件处理需要绑定 this

1、事件处理的三种方法

（1）在回调函数中使用箭头函数：onClick={ () => this.fn() }

缺点：在每次 render 时候，都会产生一个匿名函数。如果此组件作为一个子组件，那么父组件 render 的时候，子组件也可能会重新渲染，消耗性能。

（2）在构造器 constructor 中绑定 this：this.fn = this.fn.bind(this)

缺点：每次都要手动绑定 this。

（3）使用类字段语法：fn = () => { }

缺点：ES7功能。实验性属性，可能不兼容，需要babel处理。

2、为什么 react 中的事件需要绑定 tihs

函数中的 this 指向函数的调用者。obj.fn() 则 fn 中的 this 指向 obj；如果 cb = obj.fn()，再调用 cb() 则 this 指向 window。中间变量 cb 的调用者为 window。

然而在 react 中，传递的事件参数不是一个字符串，而是一个实实在在的函数。<button onClick={ fn } />，react 中的事件名（onClick）就是我所举例子中的中间变量，react 在事件发生时调用 onClick，由于onClick只是中间变量，所以处理函数中的this指向会丢失，为了解决这个问题，我们需要在实例化对象的时候，在构造函数中绑定 this，使得无论事件处理函数如何传递，它的 this 的指向都是固定的，固定指向我们所实例化的对象。