剖析 React 事件机制，从入门到精通

2023-11-19 06:04:21

初学 React 之事件

在学习 React 的过程中，事件绑定是一个不可或缺的环节。那么，React 中的事件绑定有何特点呢？让我们从一段代码开始：

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

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

乍一看，这段代码似乎没有什么问题，它与我们通常在 JavaScript 中编写的事件处理程序非常相似。然而，在 React 中，这种写法却存在一些问题。

首先，当组件重新渲染时，handleClick 函数会重新创建。这意味着每次组件更新，都会创建一个新的事件处理程序，这可能会导致性能问题。

其次，handleClick 函数直接在组件内部定义，这使得它难以测试和重用。

为了解决这些问题，React 提供了另一种事件绑定方式，称为“合成事件”。合成事件是 React 创建的跨浏览器兼容的事件对象，它可以有效解决上述问题。

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

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

在这种写法中，handleClick 函数被定义在组件外部，并且它使用箭头函数语法。这使得 handleClick 函数在组件重新渲染时不会被重新创建，从而提高了性能。同时，将 handleClick 函数定义在组件外部也使得它更容易测试和重用。

除了上述两种事件绑定方式之外，React 还提供了一些其他事件绑定方式，例如：

onXxx 属性：这种写法与 HTML 中的事件绑定方式类似，例如：<button onClick={handleClick}>Click me</button>。
addEventListener 方法：这种写法与原生 JavaScript 中的事件绑定方式类似，例如：component.addEventListener('click', handleClick);。

React 中的事件处理非常灵活，您可以根据自己的需要选择合适的事件绑定方式。

事件传播

在 React 中，事件传播与原生 JavaScript 中的事件传播非常相似。当一个事件发生时，它会从目标元素开始传播，然后逐级向上传播到父元素，直到到达根元素。

在事件传播过程中，我们可以使用 stopPropagation 方法来阻止事件的进一步传播。例如：

const handleClick = (e) => {
  e.stopPropagation();
  console.log('Button clicked');
};

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