前端小卒

Appearance

6.2 事件的注册与分发：插件系统（Plugin System）的角色 ​

在上一节中，我们了解了 React 通过事件委托在根节点统一处理事件。但这引出了一个问题：当根节点捕获到一个原生的 click 事件时，React 是如何知道要执行哪个组件的 onClick 处理器，又是如何处理像 onChange 或 onMouseEnter 这样行为复杂的事件的呢？

答案就在于 React 事件系统的“大脑”——一个高度模块化、可扩展的事件插件系统（Event Plugin System）。这个系统位于 react-dom-bindings 包内，是连接原生 DOM 事件和 React 组件事件处理器的桥梁。

事件插件的注册：建立映射关系 ​

React 的事件能力并非铁板一块，而是由多个各司其职的插件共同提供的。当你引入 react-dom 时，这些插件就会被自动注册。

javascript
// react-dom-bindings/src/events/DOMPluginEventSystem.js (概念简化)

// 1. 导入各种事件插件
import SimpleEventPlugin from './plugins/SimpleEventPlugin';
import EnterLeaveEventPlugin from './plugins/EnterLeaveEventPlugin';
import ChangeEventPlugin from './plugins/ChangeEventPlugin';
import SelectEventPlugin from './plugins/SelectEventPlugin';
import BeforeInputEventPlugin from './plugins/BeforeInputEventPlugin';

// 2. 在模块加载时立即执行注册
SimpleEventPlugin.registerEvents();
EnterLeaveEventPlugin.registerEvents();
ChangeEventPlugin.registerEvents();
SelectEventPlugin.registerEvents();
BeforeInputEventPlugin.registerEvents();

每个插件的核心职责之一就是调用 registerTwoPhaseEvent 或 registerDirectEvent，来声明它能处理哪些 React 事件，以及这些事件依赖哪些原生 DOM 事件。

以 SimpleEventPlugin 为例，它负责处理大部分简单的事件：

javascript
// plugins/SimpleEventPlugin.js (概念简化)

function registerSimpleEvents() {
  // 注册'onClick'，它依赖于原生的'click'事件
  registerTwoPhaseEvent('onClick', ['click']);

  // 注册'onKeyDown'，它依赖于原生的'keydown'事件
  registerTwoPhaseEvent('onKeyDown', ['keydown']);

  // ... 其他几十个简单事件
}

通过这个注册过程，React 在内部建立了一个关键的映射表（registrationNameDependencies），它清楚地记录了 React 事件名（如 onClick）与它所依赖的原生事件名（如 ['click']）之间的关系。同时，所有需要监听的原生事件名会被收集到一个集合（allNativeEvents）中，供后续的事件委托使用。

事件的提取与分发：extractEvents 的工作流 ​

当用户与页面交互，一个原生 DOM 事件（例如 click）在根节点被触发后，事件处理流程就交给了插件系统。核心函数 extractEvents 会被调用，它就像一个“总调度官”，依次询问每个插件：“这个事件你认识吗？你能处理吗？”

这个过程可以分解为以下几个步骤：

  1. 事件触发：原生 click 事件在根节点被监听到。
  2. 调用总调度官：顶层的 extractEvents 函数被调用，它接收原生事件对象、事件目标等信息。
  3. 遍历插件：extractEvents 依次调用所有已注册插件（SimpleEventPlugin, ChangeEventPlugin 等）的 extractEvents 方法，并将原生事件信息传递给它们。
  4. 插件认领与处理：
    • SimpleEventPlugin 的 extractEvents 方法被调用。它检查到事件类型是 click。
    • 根据之前注册的映射关系，它知道 click 事件对应于 React 的 onClick 事件。
    • 它创建一个 SyntheticMouseEvent（合成事件对象）来包装原生的 click 事件。
    • 最关键的一步：它从事件触发的真实 DOM 节点对应的 Fiber 开始，向上遍历整个 Fiber 父路径，收集所有路径上定义了 onClick 或 onClickCapture 属性的组件及其处理器函数。
    • 最后，它将创建的合成事件对象和收集到的处理器函数列表打包成一个“待办事项”，推入一个名为 dispatchQueue（分发队列）的数组中。
  5. 其他插件：ChangeEventPlugin 等其他插件看到事件是 click，不属于自己的职责范围，于是直接忽略。
  6. 队列执行：在所有插件都检查完毕后，React 会开始处理 dispatchQueue。它会遍历队列中的每个“待办事项”，并按照 DOM 的捕获和冒泡顺序，依次执行收集到的事件处理器函数，同时将合成事件对象作为参数传入。

复杂事件的处理 ​

对于像 onChange 这样的事件，插件系统的价值体现得更为明显。

  • ChangeEventPlugin：它不会只监听 change 事件。为了在所有浏览器中提供一致的行为，它可能会同时监听 input、keydown、click 等多个原生事件。在它的 extractEvents 方法内部，它会通过复杂的逻辑判断当前是否满足触发一次 React onChange 事件的条件。如果是，它才会创建合成事件并收集监听器。
  • EnterLeaveEventPlugin：它负责处理 onMouseEnter 和 onMouseLeave。这两个事件在原生 DOM 中并不存在，且与 mouseover/mouseout 的行为不同（它们在鼠标从父元素移动到子元素时不会触发）。EnterLeaveEventPlugin 通过监听 mouseover 和 mouseout，并比较事件的 target 和 relatedTarget，来模拟出正确的 onMouseEnter/onMouseLeave 行为。

总结 ​

React 的事件插件系统是一个优雅且解耦的设计。它通过将不同事件的处理逻辑封装在各自的插件中，实现了高度的可扩展性和可维护性。

  • 注册阶段：插件声明自己能处理的事件类型，建立 React 事件与原生事件的映射关系。
  • 分发阶段：当原生事件发生时，插件系统通过 extractEvents 工作流，识别事件、创建合成事件对象、收集监听器，并最终将它们有序地放入分发队列等待执行。

正是这个强大的“总调度中心”，使得 React 能够以统一、高效且兼容的方式处理纷繁复杂的浏览器事件。

Last updated: