React合成事件

一、合成事件

    1. event 是 SyntheticEvent ,模拟出来 DOM 事件所有能力
    1. event.nativeEvent 是原生事件对象
    1. 所有的事件,都被挂载到 document 上(React ≤ 16),React17之后是挂载到root组件
    1. 和 DOM 事件不一样,和 Vue 事件也不一样

      div触发事件,DOM事件冒泡到document上,
      document会生成一个统一的合成事件对象
      再派发事件

二、为什么要合成事件机制?

1、更好的兼容性和跨平台

自己实现一套事件机制,尽可能摆脱了DOM事件的逻辑, 更好的兼容性和跨平台

2、挂载到document, 减少内存消耗,避免频繁解绑

事件挂载越多,内存消耗越高,(不用给每个子元素挂载事件,使用冒泡)

看似事件挂载到组件上,其实是在document,组件销毁的时候,也不用解绑事件

3、方便事件的统一管理(如事务机制)

三、React事件绑定

  • React16 绑定到document
  • React 17 18绑定到root组件
  • 有利于多个React版本并存,例如微前端
相关推荐
Asort13 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney32 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥33 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare35 分钟前
选择文件夹路径
前端
艾小码35 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月36 分钟前
JavaScript作用域与作用域链详解
前端·面试
小刘大王36 分钟前
while循环与死循环
架构·前端框架
泉城老铁39 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅39 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript