对react 合成的理解

简介: 这是react事件机制系列文章的第二篇-对于合成的理解,今天咱们就来说说合成这个名词。

47a7f3682534fb4c20b25885af46408a_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

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


刚听说合成这个词时候,感觉是特别高大上,很有深度,不是很好理解。


当我大概的了解过react事件机制后,略微了解一些皮毛,我觉得合成不单单是事件的合成和处理,从广义上来说还包括:


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

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

不同浏览器事件兼容的处理


1. 对原生事件的封装


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

b0e280211ebcbb18b812180c03e0f0a5_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


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

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


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


fc30c6844899f642fe50141828b31479_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


4ca7a3e95e6f279db35ddba08956582e_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


看下官方文档,帮助我们理解下合成事件

c6f4336f0f9da86e5541250b450e305e_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


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

react会根据当前的事件类型来使用不同的合成事件对象,比如鼠标单机事件 - SyntheticMouseEvent,焦点事件-SyntheticFocusEvent等,但是都是继承自SyntheticEvent


91ae5e98e176e38a5f2fe6c70ea63479_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

7da1de2b6ed40349f2c3ff0970b5d6ca_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

783152f830caa207653116d6010d6375_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


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


对于有些dom元素事件,我们进行事件绑定之后,react并不是只处理你声明的事件类型,还会额外的增加一些其他的事件,帮助我们提升交互的体验。

这里就举一个例子来说明下:

当我们给input声明个onChange事件,看下 react给我们做了什么?


78bd539257403a29e9f4e293e58069c6_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


可以看到react不只是注册了一个onchange事件,还注册了很多其他事件。

而这个时候我们向文本框输入内容的时候,是可以实时的得到内容的。

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

所以这个原生事件的缺陷react也帮我们弥补了。


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


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


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


看下代码


20c810665a5066f6af0cd86506f9f4d1_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

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


总结:

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

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

目录
相关文章
|
9月前
|
前端开发 JavaScript 容器
【React合成事件的原理】
【React合成事件的原理】
|
9月前
|
前端开发 JavaScript 容器
React合成事件的原理
React合成事件的原理
78 0
|
5月前
|
前端开发 开发者
React合成事件的原理是什么
React合成事件的原理是什么
56 0
|
9月前
|
前端开发 JavaScript C#
React合成事件的原理?
React合成事件的原理?
108 0
|
9月前
|
前端开发 开发者
React合成事件的原理?
React合成事件的原理?
42 0
|
前端开发 JavaScript 容器
【React高级技术】合成事件以及 Test Utilities测试框架在Facebook内部进行测试
【React高级技术】合成事件以及 Test Utilities测试框架在Facebook内部进行测试
|
前端开发 JavaScript 调度
一个Bug,浅入 React 合成事件
通过一个简单的业务场景,探究 React 合成事件的底层原理。
424 0
|
设计模式 前端开发 JavaScript
探索 React 合成事件
探索 React 合成事件
309 0
|
存储 JavaScript 前端开发
React源码分析6 — React合成事件系统
React源码系列文章,请多支持: [React源码分析1 — 组件和对象的创建(createClass,createElement)](https://www.atatech.org/articles/72905) [React源码分析2 — React组件插入DOM流程](http://www.
5242 0
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
126 0