11｜事件处理：React合成事件是什么？为什么不用原生DOM事件？-现代React前端开发实战

当前位置:　首页>> 技术小册>> 现代React前端开发实战

### 第十一章 事件处理：React合成事件是什么？为什么不用原生DOM事件？

在React的广阔世界中，事件处理是构建交互式Web应用不可或缺的一部分。React通过其独特的“合成事件系统”（SyntheticEvent System）提供了一种高效、跨浏览器兼容的方式来处理DOM事件。本章将深入探讨React合成事件的本质、优势，以及为何在React应用中推荐使用合成事件而非直接操作原生DOM事件。

#### 1. React合成事件概述

**1.1 定义与背景**

React合成事件是React对浏览器原生DOM事件的抽象封装。在React组件中，我们不会直接操作DOM元素来添加事件监听器（如使用`addEventListener`），而是通过JSX语法中的事件属性（如`onClick`、`onMouseMove`等）来声明事件处理函数。React在内部维护了一个事件池（Event Pooling），用于管理这些事件的创建、分发和回收，以提高性能并减少内存消耗。

**1.2 事件命名约定**

React合成事件的命名遵循驼峰命名法（camelCase），这与HTML中的事件属性（如`onclick`）有所不同。例如，在React中，点击事件应使用`onClick`而非`onclick`。这种命名方式不仅符合JavaScript的命名习惯，也便于开发者在JSX中快速识别事件处理函数。

#### 2. React合成事件的优势

**2.1 跨浏览器兼容性**

React合成事件系统解决了浏览器间事件处理的不一致性问题。不同浏览器对DOM事件的支持程度和行为可能存在差异，如事件冒泡和捕获的默认行为、事件对象的属性等。React通过封装这些差异，为开发者提供了一个统一的、可预测的API，使得开发者无需编写额外的代码来处理这些兼容性问题。

**2.2 自动绑定**

在React类组件中，React会自动将事件处理函数中的`this`绑定到当前组件实例上，这避免了在JavaScript中常见的`this`指向问题。虽然这一特性在函数组件和Hooks的普及下变得不那么重要（因为函数组件中的事件处理函数通常通过箭头函数或`useCallback` Hook来确保`this`的正确性），但它仍然是React合成事件系统的一个亮点。

**2.3 事件池优化**

React通过事件池机制来优化性能。在React 16及之前的版本中，React会复用事件对象，而不是每次事件触发时都创建一个新的事件对象。这意味着在事件处理函数中，如果你尝试访问事件对象的某些属性（如`event.target`），这些属性会在事件处理函数执行完毕后被重置或清空，以避免内存泄漏。虽然从React 17开始，这一行为有所改变（React 17引入了新的Fiber架构，对事件系统进行了重构，但事件池的概念仍然在一定程度上存在，只是实现方式有所不同），但事件池作为React性能优化的一个方面，仍然值得了解。

**2.4 阻止默认行为和冒泡**

React合成事件提供了`preventDefault`和`stopPropagation`方法来阻止事件的默认行为和冒泡。这些方法与原生DOM事件中的同名方法功能相同，但使用React合成事件可以确保跨浏览器的一致性。

#### 3. 为什么不用原生DOM事件？

**3.1 破坏封装性**

直接在React组件中操作DOM元素（如使用`ref`获取DOM元素并添加事件监听器）会破坏React的封装性。React鼓励通过声明式的方式来描述UI，而不是通过命令式地操作DOM。使用原生DOM事件会绕过React的事件系统，导致React无法追踪到这些事件，进而可能引发状态更新不一致、性能问题等。

**3.2 难以维护**

随着应用规模的扩大，直接在DOM上添加事件监听器会使得事件管理变得复杂且难以维护。特别是在组件树中，如果多个组件都试图操作同一个DOM元素的事件，就可能出现事件冲突或遗漏。而React合成事件通过组件的props传递事件处理函数，使得事件管理更加清晰、集中。

**3.3 失去React的优势**

如前所述，React合成事件提供了跨浏览器兼容性、自动绑定、事件池优化等优势。如果放弃使用React合成事件而改用原生DOM事件，就意味着放弃了这些优势，进而可能影响到应用的性能和可维护性。

#### 4. 实战应用

**4.1 示例：点击按钮改变状态**

```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

const handleClick = () => {
    setCount(count + 1);
  };

return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;
```

在上述示例中，我们使用了React合成事件`onClick`来处理按钮的点击事件。当用户点击按钮时，`handleClick`函数会被调用，进而更新组件的状态`count`。整个过程完全遵循React的声明式编程范式，没有直接操作DOM元素。

**4.2 注意事项**

- 在事件处理函数中，如果不需要使用事件对象，可以省略事件参数（如`() => setCount(count + 1)`），但这样做会失去访问事件对象的机会。
- 如果需要在事件处理函数中访问事件对象，但又不希望每次都传递它（特别是在高阶组件或Hooks中），可以考虑使用闭包或`useCallback` Hook来缓存事件处理函数。
- 注意React合成事件与原生DOM事件在事件传播（冒泡与捕获）和默认行为处理上的差异，确保按照预期的方式处理事件。

#### 5. 结论

React合成事件是React框架中不可或缺的一部分，它提供了高效、跨浏览器兼容的事件处理机制。通过理解React合成事件的本质和优势，我们可以更好地利用React来构建高性能、可维护的Web应用。同时，我们也应该避免在React应用中直接使用原生DOM事件，以免破坏React的封装性和优势。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(下)

ReactJS面试指南

深入学习React实战进阶

React全家桶--前端开发与实例(上)

剑指Reactjs

React 进阶实践指南