React 事件机制

React 中的事件机制是什么样的

React 的事件机制是 合成事件（Synthetic Event），它是对 原生事件的封装。

事件的监听并不绑定在真实的 DOM 元素上，而是绑定在顶层元素上：

• React18 之前是 document
• React18 开始是 root 元素（避免对外部代码的影响）

回调函数存储在 DOM 元素对应的 fiber 中，当事件冒泡到顶层元素时，通过 event.target 确定真实点击的元素，从 target 向上遍历，找到绑定了对应事件的组件，并执行回调

和原生事件的区别

• React 事件绑定默认是在冒泡阶段触发，不能直接监听 捕获阶段 的事件（但可以通过 onClickCapture 等方式监听）
• 不能通过 return false 阻止默认行为或事件冒泡（原生事件的该方式只在 onclick 方式绑定时有效）
• 调用 event.stopPropagation 只会阻止 React 合成事件的冒泡，而不会阻止原生事件冒泡
  • 阻止原生事件冒泡的方式：event.nativeEvent.stopImmediatePropagation();
• 当使用 Portals 时，React 的事件仍按照组件层级冒泡，而非 DOM 结构

为什么要使用这样的事件机制

• 更好的兼容性：
  • 统一封装原生事件，保证跨浏览器兼容性
• 更好的性能：
  • 事件绑定在 root，减少 DOM 事件监听器
  • 事件对象被复用，避免频繁创建对象