前端小卒

Appearance

6.1 React 事件系统概览：合成事件与事件委托 ​

当我们在 JSX 中为组件添加事件处理函数时，例如 onClick={handleClick}，React 并没有简单地将一个原生的 click 事件监听器附加到对应的 DOM 节点上。相反，React 实现了一套独立且强大的事件系统，它不仅解决了跨浏览器的兼容性问题，还通过高效的机制提升了应用的整体性能。这套系统的两大基石是 事件委托（Event Delegation） 和 合成事件（SyntheticEvent）。

事件委托：在根部管理所有事件 ​

想象一个包含成百上千个可点击元素的列表。如果为每个元素都单独添加一个 onClick 监听器，将会创建成百上千个事件监听器实例，这不仅会占用大量内存，还可能影响应用的启动性能。

React 巧妙地避开了这个问题，它采用了一种被称为“事件委托”的模式。具体来说：

React 不会将事件处理器直接绑定在渲染它们的 DOM 元素上，而是在应用的根节点上为每种事件类型只绑定一个监听器。

当一个事件（例如点击）在某个深层组件的 DOM 元素上被触发时，该事件会按照 DOM 的标准行为向上冒泡。当它冒泡到应用的根节点时，React 的顶级事件监听器就会捕获到它。

这个顶级监听器随后会：

  1. 确定事件的真正目标（用户实际点击的组件）。
  2. 收集从该组件到根节点路径上所有定义了相应事件处理器的组件。
  3. 模拟事件的捕获和冒泡阶段，依次调用这些处理器。

React 18+ 的重要变化：委托到应用根元素 ​

在 React 17 及更早版本中，所有的事件都被统一委托到 document 对象上。从 React 18 开始，伴随着 createRoot API 的普及，事件委托的根节点变更为 React 应用渲染的根 DOM 元素。

jsx
// 在 React 17 中，事件监听器最终附加在 document 上
const container = document.getElementById('app');
ReactDOM.render(<App />, container);

// 在 React 18+ 中，事件监听器附加在 id 为 'root' 的 div 元素上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

设计思考：这一改变带来了显著的好处：

  • 提升多实例应用的隔离性：当一个页面上存在多个独立的 React 应用实例或微前端时，将事件委托到各自的根元素可以有效避免事件系统的相互干扰。一个应用的 stopPropagation() 调用不会再意外地阻止另一个应用的事件处理。
  • 改善与非 React 代码的集成：如果页面中混合了 React 和其他 JavaScript 库（如 jQuery），将事件限定在 React 的渲染根内，可以防止外部脚本的事件处理逻辑对 React 应用产生意料之外的影响。

合成事件：抹平浏览器差异 ​

浏览器之间的竞争导致了许多原生事件在实现上存在细微的差异。例如，事件对象的属性名可能不同，或者某些行为不一致。为了解决这个问题，React 引入了 SyntheticEvent。

SyntheticEvent 是 React 对浏览器原生事件对象的一个跨浏览器包装器。 它提供了一套与原生事件几乎完全相同的 API，但保证了在所有浏览器中的行为都是一致的。

当你从事件处理器中接收到一个 event 对象时，你操作的其实就是 SyntheticEvent 的实例。它暴露了标准的方法，如 preventDefault() 和 stopPropagation()，以及属性如 target、currentTarget 等。

javascript
function MyButton() {
  function handleClick(e) {
    // e 是一个 SyntheticEvent 实例
    e.preventDefault(); // 阻止默认行为，在所有浏览器中都有效
    console.log('Button was clicked!');
  }

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

React 18+ 的重要变化：告别事件池化 ​

在旧版本的 React 中，为了性能优化，SyntheticEvent 对象是被“池化”（pooled）的。这意味着在事件回调函数执行完毕后，事件对象的所有属性都会被清空，并被放回一个池子中等待下一次复用。因此，如果你想在异步操作中访问事件属性，就必须调用 e.persist()。

从 React 18 开始，SyntheticEvent 不再被池化。

设计思考：移除事件池化主要是因为现代 JavaScript 引擎在对象分配和垃圾回收方面的性能已经大幅提升，池化带来的性能优势变得不再明显。移除池化机制大大简化了 React 的内部实现，并且提升了开发体验——开发者不再需要担心异步场景下事件对象失效的问题，可以更直观地编写代码。

总结 ​

React 的事件系统通过事件委托和合成事件这两个核心机制，实现了高性能、跨浏览器兼容的事件处理模型。事件委托通过在根节点统一处理事件，大幅减少了内存消耗；而合成事件则为开发者提供了一个稳定、一致的编程接口。React 18+ 对这两个机制的改进，进一步增强了 React 应用的健壮性和现代开发体验。

Last updated: