react的合成事件

react自己有一套自己的事件机制,它在DOM事件体系基础上做了改进,减少了内存消耗,并且最大程度的消除了ie等浏览器的不兼容问题。
它的特点有以下几个:
react上注册的事件最终会绑定到document上,而不是react组件对应的dom(减少内存开销,因为所有的事件都绑定在document上,其他节点没有绑定事件)。(react17后绑定在渲染react树的根节点上)。
react自身实现了一套事件冒泡机制,所以在事件上使用event.stopPropagation()(阻止冒泡)无效。
react通过队列的形式,从触发的组件向父组件回溯,然后调用他们JSX中的callBack。
react通过对象池的形式管理合成事件对象的创建和销毁,减少了垃圾的生成和新对象内存的分配,提高了性能。

原因:
抹平不同浏览器之间的差异,更便于跨平台。
事件合成可以处理兼容性问题。
利用事件委托机制,支持动态绑定,简化了DOM事件处理逻辑,减少了内存开销。
React16引入fiber结构(类似于树的双向链表),React可以通过干预事件的分发以优化用户的交互体验

与原生事件的不同:

  1. 合成事件的监听器是统一注册在document上的,并且仅有冒泡阶段,所以原生事件的事件监听总是快于合成事件的监听响应。
  2. 阻止了原生事件的冒泡后,会阻止合成事件的监听器执行。
posted @ 2023-02-01 14:23  卿六  阅读(162)  评论(0编辑  收藏  举报