对react 合成的理解
这是react事件机制系列文章的第二篇-对于合成的理解，今天咱们就来说说合成这个名词。
刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。
当我大概的了解过react事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括：
首先就是对原生事件的封装
对某些原生事件的升级和改造
不同浏览器事件兼容的处理
1. 对原生事件的封装
先看一段再熟悉不过的代码
上面代码是给一个元素添加click事件的回调方法
方法中的参数e，其实不是原生事件对象而是react包装过的对象，同时原生事件对象被放在了属性 e.nativeEvent 内。
通过调试，在执行栈里看下这个参数e包含哪些属性
看下官方文档，帮助我们理解下合成事件
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内部还处理了很多，我只是略微简单的举了几个栗子。
本文算是一个过度吧，后面开始聊事件注册和事件派发的机制了。
欢迎关注，前端张大胖-公众号
用小册的形式来记录自己对技术的理解和感悟
以上是 对react 合成的理解 的全部内容， 来源链接： utcz.com/z/384186.html
