今天给大家分享的是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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS解构赋值是什么意思，应用场景有哪些

  解构赋值是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的5个常见场景与实例的相关资料,需要的朋友可以参考下

• JS中call、apply和bind的用法是什么，如何实现

  其实在很多文章都会写call，apply，bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下

• JS中什么时候用hasOwnProperty属性，用法是什么

  js不会保护hasOwnProperty被非法占用，如果一个对象碰巧存在这个属性， 就需要使用外部的hasOwnProperty 函数来获取正确的结果。当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。

• 用Vue框架怎么写一个简易的购物车

  这篇文章主要为大家详细介绍了Vue.js框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS函数式编程是什么，有哪些基础知识

  盲猜一个：如果你有看过《medium 五万赞好文-《我永远不懂 JS 闭包》》你一定会对 JS 的【函数】有更多兴趣！皮一下，很舒服~ 没错！JS 就是轻量级的函数式编程！拆解一下这句话，品味一下~本瓜将借助《JavaScript 轻量级函数式编程》一书带领你先透析它的落脚点函数式编程，然后再看看 JS 为什么被称为是