书籍 / React 实战：从 Hooks 到源码
第 4 章

事件系统深度解析

第4章：事件系统深度解析

React 的事件系统是框架中最容易被忽视、但最容易踩坑的部分之一。当你混用原生 addEventListener 和 React 事件处理时，深入理解这套机制就不再是可选项。

本章核心问题：React 的合成事件系统在底层是如何工作的？混用原生事件时会发生什么？ 读完本章你将理解：

Level 1 · 你需要知道的（1-3年经验）

合成事件：标准化的跨浏览器抽象

React 并不直接将事件监听器绑定到每个 DOM 元素上。当你写：

<button onClick={handleClick}>Click me</button>

React 不会在这个 <button> 元素上调用 addEventListener('click', handleClick)。相反，React 使用了**事件委托（Event Delegation）**机制——将所有事件监听器集中绑定到某个容器节点上。

SyntheticEvent 是 React 对浏览器原生事件对象的跨浏览器封装。它的属性与原生事件几乎相同（target、currentTarget、preventDefault、stopPropagation 等），但内部实现做了标准化处理。

function handleClick(event) {
  console.log(event.nativeEvent);               // 原生浏览器 Event 对象
  event.preventDefault();                       // 跨浏览器一致
  event.stopPropagation();                      // 阻止在 React 树中的冒泡
  event.nativeEvent.stopImmediatePropagation(); // 阻止原生 DOM 冒泡
}

事件池（Event Pooling）：已移除的优化

React 16 使用了事件池优化：SyntheticEvent 对象在事件处理完成后会被回收。React 17 彻底移除了事件池。你可以在任何异步代码中安全访问事件对象。

事件委托：从 document 到 root 的架构演变

React 16 将所有事件监听器挂载到 document 节点上。问题：如果你在某个 DOM 节点上通过原生 addEventListener 阻止了冒泡，React 的事件处理也就不会触发。

React 17 将事件委托目标从 document 改为 React 应用的根 DOM 容器。这使得多个 React 应用可以共存（微前端），渐进式迁移成为可能。

Level 2 · 它是怎么运行的（3-5年经验）

Portal 中的事件冒泡

Portal 允许将组件渲染到 DOM 树的任意位置，同时保持它在 React 组件树中的逻辑位置。

关键行为：Portal 中的事件遵循 React 组件树的结构冒泡，而不是 DOM 树的结构。

function Modal({ children, onClose }) {
  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Modal 渲染到了 document.body，在 DOM 树中与 App 的 div 没有父子关系。但当 Modal 内部触发点击事件时，这个事件会沿着 React 组件树冒泡到 App。

混用原生 addEventListener 与 React 事件

混用时事件触发顺序：

  1. 原生捕获阶段（从 document 向下到 button）
  2. 目标节点上的原生监听器
  3. 原生冒泡阶段监听器
  4. React 在根节点的事件委托处理
  5. document 上的原生监听器

常见陷阱：在原生监听器中阻止冒泡

在 React 17+ 中，如果在某个 DOM 元素上调用 e.stopPropagation()，事件无法到达 React 的根节点，导致该元素内所有 React 事件处理函数都不会触发。

更好的"点击外部关闭"实现：

function Dropdown() {
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    function handleOutsideClick(e) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && <ul>...</ul>}
    </div>
  );
}

使用 contains() 判断点击目标是否在组件内，避免了 stopPropagation 的干扰。

Level 3 · 规范怎么定义的（资深）

React 19 的事件处理变化

事件处理函数可以是异步的：React 19 的 Transitions 和 Actions 允许事件处理函数直接返回 Promise。

function SubmitButton() {
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(event) {
    event.preventDefault();
    startTransition(async () => {
      await submitForm(formData);
    });
  }

  return (
    <button onClick={handleSubmit} disabled={isPending}>
      {isPending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

ref 回调可以返回清理函数：React 19 允许 ref 回调函数返回清理函数，类似 useEffect：

function MeasuredComponent() {
  return (
    <div
      ref={(node) => {
        if (node) {
          const observer = new ResizeObserver(handleResize);
          observer.observe(node);
          return () => observer.disconnect();
        }
      }}
    >
      Content
    </div>
  );
}

Level 4 · 边界与陷阱（所有人）

陷阱一：stopPropagation 在 React 和原生事件之间的行为差异

在 React 事件处理器中调用 e.stopPropagation() 只阻止合成事件的冒泡（沿 React 树），不影响原生冒泡。反之，在原生监听器中调用 e.stopPropagation() 可能阻止事件到达 React 的委托根节点，导致 React 事件全部失效。

陷阱二：在 useEffect 中注册的原生事件忘记清理

// 错误：没有 cleanup，组件卸载后监听器仍在
useEffect(() => {
  document.addEventListener('keydown', handler);
}, []);

// 正确：返回清理函数
useEffect(() => {
  document.addEventListener('keydown', handler);
  return () => document.removeEventListener('keydown', handler);
}, []);

陷阱三：误以为 React 事件冒泡等同于 DOM 事件冒泡

在 Portal 场景下，React 事件沿组件树冒泡而非 DOM 树冒泡。如果不理解这一点，在 Modal 组件中可能会遇到点击事件意外触发父组件处理器的问题。理解事件系统的架构差异是正确调试事件问题的基础。

本章评分
4.5  / 5  (73 评分)

💬 留言讨论