Skip to main content

React 合成事件

是什么​

react 合成事件是 react 模拟原生 dom 事件创建一个事件对象，拥有与浏览器原生事件相同的接口。

react 合成事件 基于 虚拟 DOM 实现了一个 SyntheticEvent[sɪnˈθetɪk] 层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。

  1. React 16 并不是将 click 事件绑在该 div 的真实 DOM 上，而是在 document 处监听所有支持的事件，当事件发生并冒泡至 document 处时，React 将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。

  2. 另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件 SyntheticEvent[sɪnˈθetɪk]。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。

  3. React 17 后的事件是注册到 root 上而非 document，这主要是为了渐进升级，避免多版本的 React 共存的场景中事件系统发生冲突。

示例​

比如原生 onclick 事件对应 React 中的 onClick 合成事件。

const handleClick = (e) => {e.preventDefault();}

// 原生事件
<div onclick="handleClick()"></div>

// React合成事件
<div onClick={HandleCilck}></div>

优点​

  1. 兼容所有浏览器，更好的跨平台；
  2. 将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。
  3. 方便 react 统一管理和事务机制。