这是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内部还处理了很多,我只是略微简单的举了几个栗子。
本文算是一个过度吧,后面开始聊事件注册和事件派发的机制了。