浅谈 react 基本合成事件类

栏目: IOS · Android · 发布时间: 7年前

大家都知道 React 实现了自己的一套事件系统,今天就来说说这套事件系统的底层事件基类 SyntheticEvent ,它位于 events package 下。

浅谈 react 基本合成事件类

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

浅谈 react 基本合成事件类

紧接着就是在原型上挂载 preventDefaultstopPropagationpresistisPersistentdestructor 等方法以及属性:

浅谈 react 基本合成事件类

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

浅谈 react 基本合成事件类

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

浅谈 react 基本合成事件类

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

浅谈 react 基本合成事件类

以上只是了解了 react 事件的一小块,它将所有的事件都委托在 document 上,更多内容有兴趣的看下这篇文章 React事件机制 - 源码概览(上) ,如有不当,欢迎指出交流 :smile::smile:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

阿里传

阿里传

波特·埃里斯曼 / 张光磊、吕靖纬、崔玉开 / 中信出版社 / 2015-9-15 / CNY 49.00

你只知道阿里巴巴故事的中国部分,而这本书会完整呈现故事的全部。 波特•埃里斯曼是阿里巴巴创业时期为数不多的外国高管。他于2000~2008年在阿里巴巴担任副总裁,这本书记录了他在阿里巴巴8年的时间里的创业故事、商业经验以及在阿里巴巴和马云、蔡崇信、关明生等阿里巴巴早期团队并肩奋战的故事。 在波特眼中,阿里巴巴的成功经验和模式是可以复制的,阿里巴巴曾经犯过的错误,走过的弯路,我们也可以绕......一起来看看 《阿里传》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具