React最佳实践：实现悬停效果用:hover还是onMouseEnter/mouseLeave？

优先选择styled-components中使用&:hover伪类的实现方式，仅在有额外交互逻辑需求时选择onMouseEnter/onMouseLeave事件方案，核心原因如下：

• 性能开销更低：CSS伪类由浏览器原生解析渲染，不需要触发React的合成事件处理、内部状态更新、组件重渲染流程，纯CSS方案的性能远优于JS事件控制样式的方案，在页面按钮数量较多的场景下差异会更加明显
• 代码可维护性更强：样式逻辑统一收敛在styled组件文件中，和JSX中的业务逻辑完全分离，后续调整悬停样式时只需要修改样式文件即可，不需要在组件业务逻辑中查找对应的事件处理函数
• 兼容性与可访问性更好：原生hover伪类天然兼容所有标准浏览器，还可以很方便的同步适配键盘可访问性需求，比如直接扩展为&:hover, &:focus-visible就能同时覆盖鼠标悬停、键盘聚焦两种场景，用JS事件实现的话需要额外处理聚焦、失焦事件，反而会增加不必要的工作量

如果你的悬停逻辑不只是修改按钮本身的样式，比如需要在悬停时上报埋点、拉取异步数据、弹出复杂交互浮层，这种场景才需要使用onMouseEnter/onMouseLeave事件实现。

常规纯样式的悬停效果参考写法：

import styled from 'styled-components'

const BaseButton = styled.button`
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;

  /* 纯CSS实现悬停样式 */
  &:hover {
    background-color: #40a9ff;
  }
`

内容的提问来源于stack exchange，提问作者Battleaxe