浅谈 react 基本合成事件类

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

大家都知道 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:


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

查看所有标签

猜你喜欢:

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

Algorithms Illuminated (Part 2)

Algorithms Illuminated (Part 2)

Tim Roughgarden / Soundlikeyourself Publishing, LLC / 2018-8-5 / USD 17.99

Algorithms are the heart and soul of computer science. Their applications range from network routing and computational genomics to public-key cryptography and machine learning. Studying algorithms can......一起来看看 《Algorithms Illuminated (Part 2)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具