React 17 事件机制源码解析：深入浅出的代码剖析

前端

2024-01-19 08:33:16

React 17，作为 React 的过渡版本，其事件机制的重构是其最引人注目的变革。尽管 React 18 已隆重登场，但事件机制部分却基本维持原样，这使得 React 17 的源码分析仍然具有深远意义。

序言

React 的事件机制是框架中至关重要的组成部分，它定义了用户与 React 应用程序交互的方式。在 React 17 中，事件机制经过了全面重构，旨在提高效率、可维护性和可扩展性。

React 17 事件机制剖析

React 17 的事件机制主要围绕以下几个关键概念展开：

合成事件： React 创建并管理自己的一套事件对象，称为合成事件。这些事件对象经过标准化，跨浏览器兼容。
事件冒泡： 事件从最具体的元素开始向上冒泡到文档根元素。
事件捕获： 事件从文档根元素开始向下捕获到最具体的元素。
事件委托： 将事件监听器附加到父元素上，而不是每个子元素上，以提高性能。

源码分析

为了深入了解 React 17 的事件机制，我们从其核心文件 events.js 入手。

const ReactEvents = {
  ...
  handleTopLevel: function(event, context, type, target) {
    ...
    const nativeEvent = event.nativeEvent;
    const SyntheticEvent = ReactBrowserEventEmitter._getEventConstructor(type);
    ...
  },
  ...
};

在这个函数中，React 首先根据事件类型创建合成事件对象。然后，它使用事件冒泡和事件委托的机制，将事件分发给适当的 React 组件。

实战案例

为了演示 React 17 事件机制的实际应用，我们创建一个简单的计数器应用程序。

const Counter = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡
    setCount(count + 1);
  };

  return <button onClick={handleClick}>点击我</button>;
};