结合源码完全理解 react事件机制原理 02 - 对于合成的理解

前言

这是react事件机制系列文章的第二篇-对于合成的理解，我们就来讲说合成这个名词。

刚据说合成这个词时候，感受是特别高大上，颇有深度，不是很好理解。

当我大概的了解过react事件机制后，略微了解一些皮毛，我以为合成不仅仅是事件的合成和处理，从广义上来讲还包括：

1.首先就是对原生事件的封装

2.对某些原生事件的升级和改造

3.不一样浏览器事件兼容的处理

---

1. 对原生事件的封装

先看一段再熟悉不过的代码

上面代码是给一个元素添加click事件的回调方法

方法中的参数e，其实不是原生事件对象而是react包装过的对象，同时原生事件对象被放在了属性 e.nativeEvent 内。

经过调试，在执行栈里看下这个参数e包含哪些属性

![clipboard.p

vhR)

![图片上传中...]

看下官方文档，帮助咱们理解下合成事件

SyntheticEvent是react合成事件的基类，定义了合成事件的基础公共属性和方法。

react会根据当前的事件类型来使用不一样的合成事件对象，好比鼠标单机事件 - SyntheticMouseEvent，焦点事件-SyntheticFocusEvent等，可是都是继承自SyntheticEvent。

2.对原生事件的升级和改造

对于有些dom元素事件，咱们进行事件绑定以后，react并非只处理你声明的事件类型，还会额外的增长一些其余的事件，帮助咱们提高交互的体验。

这里就举一个例子来讲明下：

当咱们给input声明个onChange事件，看下 react帮咱们作了什么？

能够看到react不仅是注册了一个onchange事件，还注册了不少其余事件。

而这个时候咱们向文本框输入内容的时候，是能够实时的获得内容的。

然而原生只注册一个onchange的话，须要在失去焦点的时候才能触发这个事件。

因此这个原生事件的缺陷react也帮咱们弥补了。

ps：上面红色箭头中有一个 invalid事件，这个并无注册到document上，而是在具体的元素上。个人理解是这个是html5新增的一个事件，当输入的数据不符合验证规则的时候自动触发，然而验证规则和配置都要写在当前input元素上，若是注册到document上这个事件就无效了。

3.浏览器事件的兼容处理

这个也算是一个点吧。react在给document注册事件的时候也是对兼容性作了处理。

看下代码

上面这个代码其实就是给document注册事件，内部其实也是作了对ie浏览器的兼容。

总结：

以上就是我对于react合成这个名词的理解，其实react内部还处理了不少，我只是略微简单的举了几个栗子。

本文算是一个过分吧，后面开始聊事件注册和事件派发的机制。走起~

更多精彩内容欢迎关注个人公众号-前端张大胖