26、React 事件处理与性能优化详解

React 事件处理与性能优化详解

1. React 事件处理基础

在 React 中，事件处理是构建交互性应用的关键部分。我们可以通过传递函数作为属性来实现事件处理。例如，下面是一个简单的按钮组件：

function Button({ handleClick, label }) {
  const buttonStyle = {...};
  const onClick = () => handleClick();
  return (
    <button style={buttonStyle} onClick={onClick}>
      {label}
    </button>
  );
}

这里我们将 handleClick 作为属性传递给 Button 组件，并在内部创建了一个本地函数 onClick 来调用它。通常，当传递函数作为属性给元素时，我们会使用 handle* 命名约定，以区分直接的事件监听器和回调函数。

2. 事件处理函数的记忆化

2.1 直接附加到 JSX 元素的事件处理函数

直接附加到代表 HTML 元素的 JSX 元素的事件处理函数不需要进行记忆化。例如，下面是一个简单的计数器组件：

function Counter() {
  const [counter, setCounte