>[danger]实现一个自定义hook useHover，当鼠标hover到元素上时触发传入的事件 自定义 Hook 是 React 中非常有用的一种方式，可以让我们将重复的逻辑进行封装和复用。下面是一个利用 useHover 自定义 Hook 实现鼠标 hover 事件的示例： ```jsx import { useState, useEffect, useRef } from 'react'; function useHover() { const [isHovering, setIsHovering] = useState(false); const ref = useRef(null); function handleMouseOver() { setIsHovering(true); } function handleMouseOut() { setIsHovering(false); } useEffect(() => { const node = ref.current; if (node) { node.addEventListener('mouseover', handleMouseOver); node.addEventListener('mouseout', handleMouseOut); return () => { node.removeEventListener('mouseover', handleMouseOver); node.removeEventListener('mouseout', handleMouseOut); }; } }, []); return [ref, isHovering]; } ``` 上面的代码中，我们首先使用 useState 和 useRef 创建了两个状态变量和一个 ref 对象。 然后，我们定义了两个处理函数 handleMouseOver 和 handleMouseOut，分别用于处理鼠标进入和离开事件，并在这两个函数中调用 setIsHovering 函数来更新状态变量的值。 接着，我们使用 useEffect 钩子函数来监听 ref 对象的变化，并给 ref 对象添加 mouseover 和 mouseout 事件监听器。当 ref 对象被销毁时，我们需要执行清理操作，移除事件监听器，以避免内存泄露。 最后，我们返回了 ref 对象和 isHovering 变量，这样我们就可以在组件中使用 useHover 函数来监听鼠标 hover 事件，从而触发相应的操作。例如： ```jsx function MyComponent() { const [hoverRef, isHovering] = useHover(); return ( <div ref={hoverRef}> {isHovering ? <p>Hovering!</p> : <p>Not hovering.</p>} </div> ); } ``` 在上面的代码中，我们将组件的 div 元素传递给 useHover 函数，并通过解构赋值获取了 hoverRef 和 isHovering 两个变量。然后，我们根据 isHovering 的值来渲染相应的内容，以达到鼠标 hover 触发操作的效果。 总之，自定义 Hook 是 React 中非常有用的一种方式，可以让我们封装和复用重复的逻辑。利用 useHover 自定义 Hook 实现鼠标 hover 事件，可以让我们更方便地实现相应的功能。