一、事件委派机制

在看 《深入React技术栈》 的时候看到的

React 事件实现了一个 事件代理机制

在进行事件绑定的时候(如 onClick = {this.clickHandle.bind(this)}),并不会直接将事件绑定到真实的节点上。

所有的事件绑定到结构的最外层,使用一个统一的事件监听器,这个监听器维持了一个映射来保存所有的组件内部的事件监听和处理函数。

组件挂载或者卸载的时候,只是在这个统一的事件监听器上插入或者删除一些对象。

当事件发生的时候,首先被这个统一的事件监听器处理,然后在映射中查找真正的事件处理函数并且调用该函数。

这种方式能够简化事件处理和回收机制,效率得到提升。

二、事件方法 this 绑定

React 在函数型组件 或者是类组件 中绑定事件的时候,不会进行 this 自动绑定,需要手动进行 this 的绑定。

1、bind

如果一个事件只会被使用一次,则使用 bind 进行绑定是比较方便的:

onClick = { this.clickHandle.bind(this,[other params]) }

2、构造函数中绑定

如果一个事件处理函数可能会多次绑定,则使用构造函数中绑定一次即可.

在 JSX 中可以直接使用 onClick = { this.clickHandle } 绑定事件

constructor(props){
  super(props);

  this.clickHandle = this.handleClick.bind(this);

  render() {
    return <button onClick = { this.handleClick }>click</button>;
  }
}

3、 箭头函数

第一种和第二种我用的比较多,但是箭头函数用的的确不多。

箭头函数的特点是, 能够自动绑定定义此函数作用域的 this

箭头函数脱离不了函数这个范围,因此其 this 指向依旧是最终调用该函数的作用域 this。(这句话是否正确或者合理目前个人并不是很清楚)

所以也可以通过这个特性实现绑定。

onClick={ () => this.handleClick() }