From 14550d3b241536756ca2615c2a6087d2ad9f4b6d Mon Sep 17 00:00:00 2001 From: Tommy Date: Tue, 24 Jun 2025 16:11:41 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=84=E4=BB=B6=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=97=B6,=20useMouseHover.tsx=20=E4=B8=8D?= =?UTF-8?q?=E8=B5=B7=E4=BD=9C=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 使用了 useEffect 来处理事件监听器的添加和移除。这样可以确保： 当组件显示（挂载）时，mouseenter 和 mouseleave 事件监听器会被添加到对应的元素上。 当组件消失（卸载）时，这些事件监听器会被自动清理，避免了内存泄漏和潜在的 bug。 当 elementRef.current 变化时（例如组件重新渲染后 ref 指向了新的 DOM 元素），useEffect 会重新执行，为新的元素正确地挂载事件。 --- src/hooks/useMouseHover.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/hooks/useMouseHover.tsx b/src/hooks/useMouseHover.tsx index d2d5b24..4b6bd52 100644 --- a/src/hooks/useMouseHover.tsx +++ b/src/hooks/useMouseHover.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import type { RefObject } from 'react'; @@ -14,8 +14,19 @@ export default function useHover( setValue(false); }; - elementRef.current?.addEventListener('mouseenter', handleMouseEnter); - elementRef.current?.addEventListener('mouseleave', handleMouseLeave); + useEffect(() => { + const node = elementRef?.current; + if (node) { + node.addEventListener('mouseenter', handleMouseEnter); + node.addEventListener('mouseleave', handleMouseLeave); + } + return () => { + if (node) { + node.removeEventListener('mouseenter', handleMouseEnter); + node.removeEventListener('mouseleave', handleMouseLeave); + } + }; + }, [elementRef.current]); return value; }