跳到主要内容

React合成事件机制

面试速答​

  • 以下内容以 React 18 为准。
  • React 合成事件是 React 对浏览器原生事件做的一层封装，统一了事件行为和分发入口。
  • 它的核心点有 3 个：
    • 事件委托
    • 跨浏览器统一接口
    • 事件触发时纳入 React 的更新体系
  • 从 React 17 开始，事件委托不再统一挂到 document，而是挂到 root 容器；React 18 延续这个行为。

核心理解​

1. 什么是合成事件​

你在 JSX 里写的：

button onClick={handleClick}

拿到的事件对象通常不是浏览器直接给你的原生事件，而是 React 包装后的 SyntheticEvent。

它提供了统一的字段和方法，比如：

  • target
  • currentTarget
  • stopPropagation
  • preventDefault

需要拿原生事件时，可以看 event.nativeEvent。

2. 为什么 React 要做这层封装​

原因主要有两个：

  • 早期用于抹平浏览器差异
  • 更重要的是把事件系统接入 React 自己的更新调度

这样事件触发后的状态更新可以和 React 内部批处理、优先级管理协同。

3. 事件委托怎么理解​

React 不会给每个节点都单独绑一套原生事件监听，而是把同类事件集中委托到根容器，再在内部找到应该响应的组件。

这样可以减少大量重复监听器。

React 18 下要特别记住的点​

1. 事件池已经不是重点​

很多旧资料会说“React 事件对象会被回收，异步里不能用”。这是 React 16 及更早时代的高频点。

React 17 之后事件池机制就不再是主角了，React 18 不需要再把它当必背结论。

2. 原生事件和 React 事件混用要小心​

如果一部分逻辑挂在原生 DOM 监听上，另一部分挂在 React 上，触发顺序和冒泡路径容易让人误判。

工程上更稳的做法是尽量统一事件体系。

典型题标准答法​

问：React 合成事件的好处是什么？​

答：统一事件接口、减少监听器数量，并且让事件触发后的更新能进入 React 的调度和批处理体系。

问：React 18 的事件委托挂在哪？​

答：挂在 root 容器上，不是统一挂到 document。这是 React 17 之后的变化。

易错点​

  • 还在把“事件池”当 React 18 的核心考点。
  • 说不清合成事件和原生事件的关系。
  • 混用两套事件系统后，错误归因给 React。

速记要点​

  • 合成事件 = React 包装后的事件系统。
  • 委托点在 root 容器。
  • React 18 下重点是事件和更新调度的配合，不是旧版事件池。