浅谈 react 基本合成事件类
source link: https://www.tuicool.com/articles/Aj6N7jv
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
大家都知道 React 实现了自己的一套事件系统，今天就来说说这套事件系统的底层事件基类 SyntheticEvent ，它位于 events package 下。
下面是 Interface ，它挂载在 SyntheticEvent 作为其静态属性，其他子类主要是通过 Interface 来生成扩展自己特有的属性：
紧接着就是在原型上挂载 preventDefault 、 stopPropagation 、 presist 、 isPersistent 、 destructor 等方法以及属性：
上面提到了 react 为了提升性能，在实现了一个 事件池 的概念，这样被释放的事件就可以被放入其中，下次再使用时，直接从其中取，省去了在此创建和销毁的开销：
此外，大家知道，不同的事件有不同的属于其本身的属性，如鼠标事件有 pageX/pageY ，滚轮事件有 deltaX/deltaY 等，上面的构造函数只是确定了基本的事件属性。所以 SyntheticEvent 实现了一个静态方法—— extend 用于扩展该事件类。
下面就看下它是如何扩展鼠标事件的：
以上只是了解了 react 事件的一小块，它将所有的事件都委托在 document 上，更多内容有兴趣的看下这篇文章 React事件机制 - 源码概览（上） ，如有不当，欢迎指出交流 :smile::smile:
Recommend
-
109
前言 近几年来，在移动端上因原生开发成本高和效率低而导致涌现出来的一大批优秀前端框架，以及专门针对移动端设备的前端开发框架（如 RN/Weex），大前端的概念被不断地提及。在这样的背景之下，前端技术也将逐渐成为移动端开发者的必备技能。笔者作为一名移动端开...
-
58
一 简述JavaScript及其在浏览器中的地位 （一） 浏览器主要构成 虽然不同浏览器之间存在差异(如Google Chrome,Firefox,Safari和IE等)，但单从浏览器构成来说，大同小
-
56
0.概述 通过本文将了解到如下内容: Linux系统的并行性特征 互斥和同步机制 Linux中常用锁的基本特性 互斥锁和条件变量...
-
2
点击进入React源码调试仓库。为什么要自己实现一套事件机制由于fiber机制的特点，生成一个fiber节点时，它对应的dom节点有可能还未挂载，onClick这样的事件处理函数作为...
-
7
浅谈Netty和Python中的事件驱动 - 书唐瑞的个人空间 - OSCHINA - 中文开源技术交流社区 ...
-
1
浅谈电动车的若干基本问题余晟51分钟前梳理与展望编者按：本文来自微信公众号
-
3
事件研究方法的基本原理 谢益辉 / 2006-03-08 上午认识了金融实验班的谢磊同学（本家啊），聊天过程中提到一个词：Event Study，我心里琢磨着这是什么研究呢，于是 Google 一下，发现原来又是一个 “冒牌货”，我认为，这种研究实质...
-
3
浅谈QitChain Network的架构细节与共识的基本原理（下） 搜索实验室 刚刚 导语在之前的文章里，我们曾提...
-
5
表单文本框的使用(二) 输入过滤(合成事件)情景：输入框需要限制出现的字符，比如只能是数字。 输入框本身是没有这个功能的，但是我们可以通过JavaScript来实现。我们能实现向输入框中输入字符，...
-
1
Vue中EventBus(事件总线)的基本用法 Vue中EventBus(事件总线)的基本用法更新日期: 2022-09-30阅读: 7标签:
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK