结合源码彻底理解 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内部还处理了很多，我只是略微简单的举了几个栗子。

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

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