在现代Web开发中，hover交互效果是提升用户体验的重要元素。本文将探讨在React 18 TypeScript项目中实现hover效果的两种主流方式：React原生实现和使用ahooks库的钩子实现。

1.React原生实现hover事件

React提供了原生的鼠标事件处理方式，我们可以利用onMouseEnter和onMouseLeave事件来模拟hover效果。

基础实现

import React, { useState } from 'react';
const HoverComponent = () => {
const [isHovered, setIsHovered] = useState(false);
return (
<div
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{
padding: ‘20px’,
backgroundColor: isHovered ? ‘#f0f0f0’ : ‘#ffffff’,
transition: ‘background-color 0.3s ease’
}}
>
{isHovered ? ‘鼠标悬停中’ : ‘鼠标移出’}
</div>
);
};
export default HoverComponent;

自定义Hook封装

为了提高代码复用性，我们可以将hover逻辑封装成自定义Hook：

import { useState } from ‘react’;
const useHover = () => {
const [isHovered, setIsHovered] = useState(false);
const hoverProps = {
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false)
};
return [isHovered, hoverProps] as const;
};
// 使用示例
const HoverComponent = () => {
const [isHovered, hoverProps] = useHover();
return (
<div
{…hoverProps}
style={{
padding: ‘20px’,
backgroundColor: isHovered ? ‘#f0f0f0’ : ‘#ffffff’
}}
>
{isHovered ? ‘悬停状态’ : ‘普通状态’}
</div>
);
};

2.使用ahooks的useHover实现

ahooks是一个高质量的React Hooks库，提供了useHover钩子来简化hover交互的实现。

基本用法

import React from ‘react’;
import { useHover } from ‘ahooks’;
const AhooksHoverDemo = () => {
const [hoverable, hovered] = useHover<HTMLDivElement>();
return (
<div
ref={hoverable}
style={{
padding: ‘20px’,
backgroundColor: hovered ? ‘#e6f7ff’ : ‘#fff’,
border: ‘1px solid #d9d9d9’,
borderRadius: ‘4px’,
transition: ‘all 0.3s’
}}
>
{hovered ? ‘ahooks悬停中’ : ‘移出ahooks悬停区域’}
</div>
);
};
export default AhooksHoverDemo;

高级用法：延迟触发

ahooks的useHover还支持配置项，比如延迟触发：

const [hoverable, hovered] = useHover<HTMLDivElement>({
onEnter: () => console.log(‘开始悬停’),
onLeave: () => console.log(‘结束悬停’),
delay: 300 // 300ms延迟
});

3.两种实现方式的对比

4.最佳实践建议

1. ​简单场景：如果项目中没有使用ahooks且hover需求简单，使用React原生实现即可

2. ​复杂场景：如果需要延迟触发、回调函数等高级功能，推荐使用ahooks

3. ​性能考虑：对于高频触发的hover交互，考虑使用防抖/节流优化

4. ​移动端适配：注意移动设备上的hover行为与桌面端不同，可能需要额外处理

5.TypeScript类型定义技巧

interface HoverProps {
onMouseEnter: React.MouseEventHandler;
onMouseLeave: React.MouseEventHandler;
}
// 自定义Hook类型
const useHover = (): [boolean, HoverProps] => {
// …实现
};
// ahooks类型
const [hoverRef, isHovered] = useHover<HTMLDivElement>();