>[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 事件，可以讓我們更方便地實現相應的功能。