React合成事件的实现机制


在 React 底层,主要对合成事件做了两件事:事件委派和自动绑定。

事件委派


  • React 它并不会把事件处理函数直接绑定到真实的节点上,而是把所有事件绑定到结构的最外层,使用一个统一的事件监听器。
  • 这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。
  • 当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象;
  • 当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。

自动绑定


  • 在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件。
  • React 会对这种引用进行缓存,以达到 CPU 和内存的最优化。
  • 在使用 ES6 classes 或者纯函数时,需要手动实现 this 的绑定。