React 监听 body 事件实现拖拽控制

本文深入讲解了在 React 中如何安全、高效地监听 document.body 全局事件（如 mouseup 和 touchend）来实现拖拽控制逻辑，强调摒弃原生 querySelector + addEventListener 的手动操作模式，转而采用 useState 管理交互状态、useEffect 控制事件绑定与自动清理的声明式方案，既避免内存泄漏、重复绑定和状态不同步等常见陷阱，又确保类名更新、DOM 行为与组件生命周期严格同步，真正践行 React 的状态驱动理念——让状态说话，让 effect 执行，让 JSX 声明结果。

本文详解如何在 React 中安全、高效地为 document.body 添加事件监听器（如 mouseup），替代原生 querySelector + addEventListener 方式，并结合 useState 和 useEffect 实现状态驱动的 DOM 类名切换与副作用清理。

在 React 应用中，直接操作 document.body（如 document.body.addEventListener('mouseup', ...)）虽可行，但若未妥善管理生命周期，极易引发内存泄漏、重复绑定或状态不同步等问题。正确的做法是：将全局事件绑定交由 useEffect 管理，配合 useState 驱动 UI 变更，彻底告别手动 querySelector 和裸 addEventListener。

✅ 核心原则：状态驱动 + 副作用受控

原生 JS 中依赖全局变量 active 控制状态，但在 React 函数组件中，普通变量在每次渲染后即被丢弃。因此必须使用 useState：

const [active, setActive] = useState(false);

active 不再是易失的局部变量，而是可触发重渲染、可被 useEffect 响应的可靠状态源。

✅ 正确绑定 document.body 事件：useEffect 是唯一可信入口

不要在事件处理器内直接调用 document.body.addEventListener —— 这会导致每次 active 变化时重复绑定。应利用 useEffect 的依赖数组和清理函数，实现「仅当 active 为 true 时绑定，且自动解绑」：

useEffect(() => {
  if (!active) return;

  const handleMouseUp = () => setActive(false);

  document.body.addEventListener('mouseup', handleMouseUp);

  // 清理：组件卸载或 active 变为 false 前移除监听器
  return () => {
    document.body.removeEventListener('mouseup', handleMouseUp);
  };
}, [active]);

⚠️ 注意：[active] 是关键依赖项。useEffect 会在 active 从 false → true 时执行绑定；当 active 变为 false 或组件卸载时，自动执行清理函数，杜绝事件残留。

✅ 无需 useRef 操作 body —— 类名通过状态动态注入

原问题中试图用 useRef 获取 .scroller-middle 并手动 classList.add/remove，这违背了 React 的声明式理念。正确方式是将 CSS 类名逻辑内联到 JSX 中：

<div
  className={`scroller-middle ${active ? 'scrolling' : ''}`}
  onMouseDown={() => setActive(true)}
>
  <svg>/* ... */</svg>
</div>

这样既避免了 DOM 直接操作，又确保类名与状态严格同步，且支持服务端渲染（SSR）兼容。

✅ 完整可运行示例（含 TypeScript 提示）

import { useState, useEffect } from 'react';

export default function ScrollHandler() {
  const [active, setActive] = useState(false);

  // 监听 body mouseup：仅当 active 为 true 时生效
  useEffect(() => {
    if (!active) return;

    const handleMouseUp = () => setActive(false);
    document.body.addEventListener('mouseup', handleMouseUp);

    return () => document.body.removeEventListener('mouseup', handleMouseUp);
  }, [active]);

  return (
    <>
      <div className="middle">
        <img src="images/vr-iootz.jpg" draggable={false} alt="VR Preview" />
      </div>

      <div
        className={`scroller-middle ${active ? 'scrolling' : ''}`}
        onMouseDown={() => setActive(true)}
      >
        <svg
          className="scroller__thumb"
          xmlns="http://www.w3.org/2000/svg"
          width="100"
          height="100"
          viewBox="0 0 100 100"
        >
          <polygon points="0 50 37 68 37 32 0 50" fill="#18183e" />
          <polygon points="100 50 64 32 64 68 100 50" fill="#18183e" />
        </svg>
      </div>
    </>
  );
}

⚠️ 重要注意事项

• 禁止在事件处理器中直接操作 document.body：如 document.body.addEventListener(...) 写在 onMouseDown 里，会随每次点击重复绑定。
• useRef 不适用于 body 操作：document.body 是全局单一节点，无需 ref；ref 应用于需要精确 DOM 访问的组件内元素（如动画目标、焦点控制）。
• .wrapper 查询问题：若需获取 .wrapper 位置（如 getBoundingClientRect()），应使用 useRef 绑定该元素，而非 querySelector：

  const wrapperRef = useRef<HTMLDivElement>(null);
  // 后续可通过 wrapperRef.current?.getBoundingClientRect() 安全访问

• 移动端兼容？ 补充 touchend 监听（document.body.addEventListener('touchend', ...)）以支持触屏设备。

通过状态 + effect 的组合，你不仅实现了与原生 JS 相同的交互逻辑，更获得了 React 生态下的可维护性、可测试性与健壮性。记住：在 React 中，让状态说话，让 effect 执行，让 JSX 声明结果。

好了，本文到此结束，带大家了解了《React 监听 body 事件实现拖拽控制》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！