React 17 事件系统详解：告别传统，拥抱委托

2023-10-08 23:15:43

打破传统的事件委托

在 React 16 中，事件委托广泛应用于父组件，以便监听其子组件的事件。这种模式虽然简单易用，但也会带来一定的性能损耗，尤其是在嵌套结构较深的组件中。React 17 敏锐地抓住了这一痛点，果断地抛弃了 document 上的事件委托。取而代之的是，它将委托权力下放到了组件内部，这意味着事件处理不再需要跨越层层组件树。这种巧妙的设计极大地减少了性能开销，提升了事件处理的效率。

拥抱组件内部委托

在 React 17 中，组件内部委托机制大放异彩。每个组件都可以独立管理自己的事件处理程序，而不必依赖父组件的委托。这种解耦式设计带来了诸多好处：

更高的性能：事件处理不再需要跨越组件树，大大减少了性能损耗。
更强的灵活性：组件可以独立控制其事件处理，简化了事件处理逻辑。
更好的封装性：事件处理与组件实现紧密结合，增强了代码的可读性和可维护性。

React 16 事件系统的回顾

为了全面理解 React 17 事件系统的变革，我们不妨回顾一下 React 16 的事件系统。React 16 采用了基于 document 的事件委托机制，所有事件处理程序都委托给了 document 对象。

这种委托模式具有以下特点：

简单易用：开发人员只需在父组件中设置事件处理程序，即可监听所有子组件的事件。
范围广：委托机制涵盖了整个文档，确保了所有事件都能得到处理。
性能损耗：事件处理需要跨越组件树，可能会导致性能问题。

迁移指南

对于计划升级到 React 17 的开发者，以下是迁移指南：

移除 document 上的事件委托

不再使用 document.addEventListener() 监听事件。React 17 的事件系统会自动处理事件委托，开发者无需手动在 document 上添加事件监听器。

// React 16 中的代码
document.addEventListener('click', handleClick);

// React 17 中不再需要

在组件内部添加事件处理程序

使用原生 HTML 事件处理属性或合成事件处理程序，如 onClick。每个组件可以独立管理自己的事件处理逻辑。

import React from 'react';

function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

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

export default MyComponent;

使用事件冒泡或事件委托

在组件内部使用事件冒泡或事件委托，以便监听子组件的事件。React 17 的事件系统会自动处理事件冒泡，开发者可以直接在父组件中处理子组件的事件。

import React from 'react';

function ParentComponent() {
  const handleChildClick = (event) => {
    console.log('Child component clicked:', event.target);
  };

  return (
    <div onClick={handleChildClick}>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  return <button>Click me</button>;
}

export default ParentComponent;