react中的事件绑定与处理

React事件绑定时需要注意this指向

react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向

<button onClick={this.plus.bind(this)}>+</button>

React处理事件有它自己的想法

1.事件委托：react组件声明的事件都会转换成DOM原生事件
2.事件冒泡：以队列的形式，可以回溯父组件
3.合成事件：并不是单纯的使用DOM原生事件
4.对象池：合理管理事件对象，内存分配，垃圾回收

事件绑定的几种实现方法

一、bind方法

例子就是开篇的改变this指向的例子。

但是这种调用方法虽然一目了然。但是有很明显的缺点。
每次重新渲染时，都会生成一个新的函数实例保存在listenerBank中，其中包括：
1.数量多时极其浪费内存
2.如果是子组件的props，则会导致子组件重新渲染

二、通过箭头函数的方法来传参调用

<button onClick={(num) => this.plus(num)}>+</button>

缺点同第一种。并且在传参时需要写两次。

三、在构造器内声明方法

constructor(props){
    super(props);
    this.state={};
    this.plus = this.plus.bind(this);
}
plus(e){
	console.log(e);
}

然后在dom元素中调用：

<button onClick={this.plus>+</button>

这样调用就不会在listenerBank中再次生成一个函数实例。属于通用方法。
但是一套流程走下来，代码量是最多的。而且如果需要传参，依然需要通过bind来传

四、::双冒号语法

<button onClick={::this.plus}>+</button>

::的意思是，绑定左值和右值，相当于.bind(this)，但是不能带参数，不推荐。每次我这么写的时候，编译器都会报错。但是实际运行是没有问题的。

总结

1.有参数就得使用bind
2.当项目庞大，组件数量极多的时候。优先使用构造器内部声明来节约性能
3.箭头函数简单便捷。如果事件较为简易。可以直接写在dom标签里