浅谈 react 基本合成事件类

[jyzwf]

React 为了实现自己的事件系统，实现了一个合成事件类  SyntheticEvent，位于 events package 下。

下面是 Interface ，它挂载在 SyntheticEvent 作为其静态属性，其他子类主要是通过 Interface 来生成扩展自己特有的属性：

紧接着就是在原型上挂载 preventDefault、stopPropagation、presist、isPersistent、destructor 等方法以及属性：

上面提到了 react 为了提升性能，在实现了一个 事件池 的概念，这样被释放的事件就可以被放入其中，下次再使用时，直接从其中取，省去了在此创建和销毁的开销：

此外，大家知道，不同的事件有不同的属于其本身的属性，如鼠标事件有 pageX/pageY ，滚轮事件有 deltaX/deltaY 等，上面的构造函数只是确定了基本的事件属性。所以 SyntheticEvent 实现了一个静态方法—— extend 用于扩展该事件类。

下面就看下它是如何扩展鼠标事件的：

以上只是了解了 react 事件的一小块，它将所有的事件都委托在 document 上，更多内容有兴趣的看下这篇文章 React事件机制 - 源码概览（上） 以及 我的在语雀上的笔记 react深入学习