React鼠标事件问题求助：鼠标移至body时展示关联的Logo与表单

嘿，这个需求我之前做类似的悬浮交互时遇到过，核心就是通过监听鼠标移动事件来控制元素的显示时序，同时要处理好状态关联和定时器的清理，避免不必要的性能损耗。下面是完整的实现方案：

核心逻辑拆解 #

• 用两个状态分别控制Logo和表单的显示/隐藏，初始都为false
• 监听body上的鼠标移动事件，触发时启动显示流程：先显示Logo，延迟一段时间后显示表单
• 设置一个“隐藏定时器”：当鼠标停止移动超过指定时间后，同时隐藏Logo和表单
• 用useRef保存定时器ID，确保在组件重渲染或卸载时能正确清理，防止内存泄漏

完整代码实现 #

import { useState, useEffect, useRef } from 'react';

function MouseTriggeredElements() {
  // 控制Logo和表单的显示状态
  const [showLogo, setShowLogo] = useState(false);
  const [showForm, setShowForm] = useState(false);
  
  // 保存定时器ID，用于清理操作
  const hideTimerRef = useRef(null);
  const formDelayTimerRef = useRef(null);

  useEffect(() => {
    const handleMouseMove = () => {
      // 清除之前的隐藏定时器，确保鼠标移动时不会触发隐藏
      if (hideTimerRef.current) {
        clearTimeout(hideTimerRef.current);
      }

      // 如果Logo还没显示，启动显示时序
      if (!showLogo) {
        setShowLogo(true);
        // 延迟指定时间后显示表单，这里设为1000ms，可按需调整
        formDelayTimerRef.current = setTimeout(() => {
          setShowForm(true);
        }, 1000);
      }

      // 设置鼠标停止移动后的隐藏定时器，这里设为3000ms，可按需调整
      hideTimerRef.current = setTimeout(() => {
        setShowLogo(false);
        setShowForm(false);
        // 清除表单的延迟定时器，防止鼠标停止后仍触发表单显示
        if (formDelayTimerRef.current) {
          clearTimeout(formDelayTimerRef.current);
        }
      }, 3000);
    };

    // 监听body的鼠标移动事件
    document.body.addEventListener('mousemove', handleMouseMove);

    // 组件卸载时清理事件监听器和所有定时器
    return () => {
      document.body.removeEventListener('mousemove', handleMouseMove);
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
      if (formDelayTimerRef.current) clearTimeout(formDelayTimerRef.current);
    };
  }, [showLogo]); // 依赖showLogo，确保状态变化时逻辑正确

  return (
    <div style={{ minHeight: '100vh' }}>
      {/* Logo元素 */}
      {showLogo && (
        <div style={{ position: 'fixed', top: '20px', left: '20px' }}>
          <h2>✨ My Logo</h2>
        </div>
      )}
      {/* 表单元素 */}
      {showForm && (
        <div style={{ position: 'fixed', bottom: '20px', right: '20px' }}>
          <input type="email" placeholder="Enter your email" style={{ padding: '8px' }} />
          <button style={{ marginLeft: '8px', padding: '8px 16px' }}>Subscribe</button>
        </div>
      )}
    </div>
  );
}

export default MouseTriggeredElements;

关键细节说明 #

1. 定时器管理：用useRef存储定时器ID是因为useState的更新会触发组件重渲染，而useRef的值在重渲染之间保持不变，能确保我们正确清除旧的定时器。
2. 状态关联：只有当Logo未显示时才启动显示流程，避免鼠标持续移动时重复触发Logo和表单的显示逻辑，保证二者的显示时序严格关联。
3. 清理操作：组件卸载时必须移除事件监听器并清除所有定时器，这是React开发中防止内存泄漏的基本操作。

可选优化 #

如果需要鼠标离开body时立刻隐藏所有元素，可以在useEffect中添加mouseleave事件监听：

const handleMouseLeave = () => {
  setShowLogo(false);
  setShowForm(false);
  if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
  if (formDelayTimerRef.current) clearTimeout(formDelayTimerRef.current);
};

document.body.addEventListener('mouseleave', handleMouseLeave);

// 清理时也要移除该事件监听器
return () => {
  // ...之前的清理代码
  document.body.removeEventListener('mouseleave', handleMouseLeave);
};

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