在 React 中，可通过复用同一事件处理函数（如 handleMouseEvents）绑定 onClick、onMouseEnter、onMouseLeave 等多个鼠标事件，避免重复代码，实现逻辑复用与 DRY 原则。
在 react 中，可通过复用同一事件处理函数（如 `handlemouseevents`）绑定 `onclick`、`onmouseenter`、`onmouseleave` 等多个鼠标事件，避免重复代码，实现逻辑复用与 dry 原则。
在实际开发中，常需对同一元素响应多种用户交互（如点击、悬停、移出），而为每个事件单独编写逻辑不仅冗余，还易引发维护问题。React 并未提供“通配鼠标事件”的原生单属性（如 onMouseAll），但可通过函数复用这一核心思想优雅解决。
最简洁、推荐的做法是：定义一个通用事件处理器，并将其分别赋值给多个事件 props。如下所示：
import React, { useState } from 'react';
function NavigationToggle() {
const [topNavigationBarCollapse, setTopNavigationBarCollapse] = useState(true);
const handleMouseEvents = () => {
setTopNavigationBarCollapse(prev => !prev);
};
return (
<button
className="collapse-button"
onClick={handleMouseEvents}
onMouseEnter={handleMouseEvents}
onMouseLeave={handleMouseEvents}
// 可按需扩展：onMouseDown, onMouseUp, onContextMenu 等
>
☰
</button>
);
}
export default NavigationToggle;✅ 优势说明：
- 真正 DRY：状态切换逻辑仅维护一处，后续修改（如添加日志、防抖、条件判断）只需调整 handleMouseEvents；
- 类型安全：TypeScript 下，所有事件处理器签名兼容 React.MouseEventHandler（尽管 onMouseEnter/onMouseLeave 不触发默认行为，但调用无副作用）；
- 可扩展性强：如需区分事件类型，可在函数内通过 event.type 判断（例如 if (event.type === 'click') { ... }），兼顾统一性与灵活性。
⚠️ 注意事项：
- 避免在 onMouseEnter/onMouseLeave 中执行高开销操作（如 API 请求），因其可能高频触发；本例中仅切换布尔状态，完全安全；
- 若需支持触屏设备，建议额外添加 onTouchStart（移动端等效于点击），提升跨端一致性；
- 不要误用 onMouseMove——它持续触发，直接调用 setState 将导致严重性能问题，应配合节流或仅用于状态标记。
总结：React 的事件系统鼓励“函数即配置”，无需引入第三方库或复杂抽象。通过复用同一个 handler，即可干净、高效、可维护地响应多种鼠标交互——这正是 React 函数组件与 Hooks 范式所倡导的简洁哲学。
