今天给大家分享的是React合成事件的内容，react合成事件指的是react用js模拟了一个Dom事件流，对eact合成事件有了简单的了解之后，接下来我们就来深入了解看看eact合成事件，下文有很详细的介绍几示例，感兴趣的朋友可以参考。

    从点击输入框开始

    react合成事件指的是react用js模拟了一个Dom事件流。（fiber树模拟Dom树结构） 合成事件的事件流在fiber树中发生捕获和冒泡。

    当你点击input输入框，react在根节点（注1）监听到focus事件（注2）（注3）。

如何从原生事件找到对应的虚拟Dom？

    此时，react得到的信息只有原生事件对象（nativeEvent）。react通过nativeEvent对应的Dom（eventTarget），沿着Dom树向上找到距离该eventTarget最近的被react管理的Dom节点（注4）（注5），并获得对应的fiber A。

    接着通过事件插件（注6），创建合成事件（注7）A。合成事件A被react视为模拟事件流中的事件源，fiber A被react视为事件目标。

合成事件流？

    从fiber A出发向上（直到顶层fiber HostComponent为止）收集所有的host类型的fiber。 然后将收集到的fiber数组，从后向前（捕获），再从前向后（冒泡）遍历。每次遍历，会收集（注8）当前遍历项fiber节点的绑定的focus事件。之后（事件插件完成后，即合成事件生成好了）会按照收集的顺序执行foucs回调。 react就是这样模拟了事件流。

    扩展

    点击输入框引起多个事件

    除了focus外，也触发了其他的事件--click等。react在根节点对不同类型的事件进行了监听，每监听到一种事件就会派发一次，多种类型的事件，会派发多次。 点击输入框，会先后触发focus和click。当focus事件的派发完后，就会派发click事件。 每次某个事件派发结束，会处理待处理的同步任务队列（flushSyncCallBackQueue）。

意料之外的render？

    在NoMode模式下，多次派发事件且每个事件都改变了状态（如调用setState），则对应组件会被render多次。 在本例中，点击input输入框，如果给input绑定了focus事件和click事件并且事件回调都调用setState，input将会render两次。

    为什么react中的input设置value后成为受控组件？

    react中，在input设置了value属性的条件下，无论在输入框中输入什么，输入框的值都不会改变。除非你改变了input组件的state。 react在处理完模拟事件流后，会调用方法将一些意外的效果重置。 例如该场景，在input中输入了一个值，input输入框会出现你输入的值，但马上input的值会被对应的fiber的value属性更新（finishEventHander 重置受控组件）。 如果没有给input设置value则会忽略。

    为什么合成事件属性有时无法访问？

    因为react在事件流（捕获到冒泡）完后就将合成事件对象释放（SyntheticEvent.prototype.destructor 将合成事件对象的属性重置）。

    react如何模拟事件的阻止冒泡、阻止默认行为？

    react按照事件流顺序执行回调，在执行前会检查当前合成事件对象是否处于阻止冒泡的状态，如果是，则终止事件流。 react的合成事件对象原型对原生函数进行增强。对原生事件方法的阻止冒泡、阻止默认行为进行了封装（内部也调用原生事件的方法）。

    注释

    注1：根节点，在 react-v16 为 document ，在 react-v17 为挂载容器Dom
    注2：focus事件并不是冒泡事件，react对非冒泡事件在捕获阶段监听
    注3：根节点对所有事件进行了监听，除了特别例外submit、reset、invalid和媒体事件等
    注4：react将fiber树挂载到Dom树上时，每个宿主（host）类型fiber节点与Dom节点一一对应，并链接
    注5：向上查找是因为可能子Dom节点并不是被react管理的，如第三库滚动插件等
    注6：为了模拟Dom事件，react进行的补充
    注7：react内部一个构造函数的实例，合成事件的部分属性来源于nativeEvent。合成事件与fiber关联
    注8：收集而不是执行。因为react针对某一类型事件的做了批处理

    以上就是对React合成事件的相关介绍，希望大家阅读完这篇文章能有所收获，想要了解更多React合成事件的知识，可以继续浏览其他相关的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• VueUse是什么，如何上手VueUse的使用

  VueUse 是一个基于 Composition API 的实用函数集合。本文就详细的介绍了VueUse的具体用法，具有一定的参考价值，感兴趣的可以了解一下

• Ajax怎样做无刷新上传文件效果，方法是什么

  最终效果展示xhr发起请求!DOCTYPE htmlhtml lang=en head meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-

• TypeScript索引签名是什么，语法怎样写

  这篇文章主要给大家分享的是TypeScript 索引签名的理解，索引签名由方括号中的索引名称及其类型组成，后面是冒号和值类型：{ [indexName: KeyType]: ValueType }， KeyType 可以是一个 string、number 或 symbol，而ValueType 可以是任何类型，下面就俩简单了解一下吧

• 基于element-ui封装查询组件的功能怎么实现

  这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下

• React函数式组件怎样优化，从哪些方面入手

  这篇文章主要介绍了React函数式组件的性能优化思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下