本文讲解如何在 react 中正确监听 document.body 的全局事件（如 mouseup），替代原生 javascript 的 addeventlistener，避免状态丢失，并结合 usestate 和 useeffect 实现安全、可维护的交互逻辑。
本文讲解如何在 react 中正确监听 document.body 的全局事件（如 mouseup），替代原生 javascript 的 addeventlistener，避免状态丢失，并结合 usestate 和 useeffect 实现安全、可维护的交互逻辑。
在 React 中，直接操作 document.body 并绑定/解绑事件（如 mousedown/mouseup）是可行的，但必须遵循 React 的响应式原则：不可依赖普通变量存储跨渲染的状态，而应使用 useState；事件监听器的生命周期需与组件状态同步，须通过 useEffect 管理。
✅ 正确做法：用 useState + useEffect 管理全局事件
原生代码中 active = false 是一个局部变量，在组件重渲染后即丢失，导致 mouseup 回调无法正确更新 UI。React 要求将此类可变状态提升为 state：
const [active, setActive] = useState(false);
接着，利用 useEffect 在 active 变为 true 时动态添加 mouseup 监听器，并在 active 变为 false 或组件卸载时自动清理——这是 React 推荐的副作用管理方式：
useEffect(() => {
if (!active) return;
const handleMouseUp = () => {
setActive(false);
};
document.body.addEventListener('mouseup', handleMouseUp);
// 清理函数：确保监听器及时移除，防止内存泄漏
return () => {
document.body.removeEventListener('mouseup', handleMouseUp);
};
}, [active]);⚠️ 注意：useEffect 的依赖数组 [active] 至关重要。若遗漏，监听器可能重复绑定；若写错（如空数组 []），则 active 状态变化不会触发监听器更新，导致逻辑失效。
? 结合 DOM 类名控制（无需 useRef 操作 body）
你无需对 document.body 使用 useRef —— React 鼓励“声明式”而非“命令式”DOM 操作。对于 .scroller-middle 元素的 scrolling 类切换，直接通过状态驱动 className：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
<div
className={`scroller-middle ${active ? 'scrolling' : ''}`}
onMouseDown={() => setActive(true)}
>
<svg className="scroller__thumb" 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>这种方式完全取代了 divRef.current.classList.add/remove()，更简洁、可预测，且天然支持服务端渲染（SSR）兼容性。
? 关于 document.querySelector('.wrapper') 的迁移建议
原生代码中 document.querySelector('.wrapper').getBoundingClientRect().left 属于 DOM 查询操作。在 React 中，推荐：
- 若 .wrapper 是当前组件的父容器，可用 useRef 获取其引用并调用 getBoundingClientRect()；
- 若需频繁读取布局信息（如滚动定位），应结合 useLayoutEffect 以保证在浏览器绘制前同步执行；
- 避免在 render 函数中调用 querySelector，因其违反 React 渲染纯函数原则，且可能引发性能问题或竞态条件。
示例（安全获取 wrapper 偏移）：
const wrapperRef = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
if (wrapperRef.current && active) {
const left = wrapperRef.current.getBoundingClientRect().left;
// scrollIt(left); // 替换为你实际的滚动逻辑
}
}, [active]);✅ 完整可运行组件示例
import { useState, useEffect, useRef } from 'react';
export default function Scroller() {
const [active, setActive] = useState(false);
const wrapperRef = useRef<HTMLDivElement>(null);
// 监听 document.body 的 mouseup 事件
useEffect(() => {
if (!active) return;
const handleMouseUp = () => setActive(false);
document.body.addEventListener('mouseup', handleMouseUp);
return () => {
document.body.removeEventListener('mouseup', handleMouseUp);
};
}, [active]);
// （可选）响应 active 状态执行滚动逻辑
useEffect(() => {
if (active && wrapperRef.current) {
const left = wrapperRef.current.getBoundingClientRect().left;
console.log('Wrapper left position:', left);
// scrollIt(left); // 实际滚动函数
}
}, [active]);
return (
<div ref={wrapperRef} className="wrapper">
<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>
</div>
);
}? 总结要点
- ✅ 永远用 useState 替代普通变量 存储需要跨渲染保留的状态；
- ✅ 全局事件监听必须由 useEffect 管理，并严格实现清理逻辑；
- ✅ 类名控制优先使用状态驱动 className 字符串拼接，而非 ref.classList 命令式操作；
- ✅ DOM 查询（如 querySelector）应封装在 useRef + useLayoutEffect 中，确保时机安全；
- ❌ 避免在事件处理器中直接修改 document.body.className 或使用未受控的 querySelector；
- ?️ 所有 addEventListener 必须配对 removeEventListener，否则将导致内存泄漏和事件堆积。
掌握这一模式，你就能稳健地将任意复杂的手动 DOM 交互迁移到现代 React 架构中。
