本文讲解在 React 中替代原生 document.body.addEventListener('mouseup', ...) 的正确方式，利用 useState 和 useEffect 实现跨组件生命周期的全局事件监听，并安全地响应鼠标释放行为，避免内存泄漏与状态丢失。
本文讲解在 react 中替代原生 `document.body.addeventlistener('mouseup', ...)` 的正确方式，利用 `usestate` 和 `useeffect` 实现跨组件生命周期的全局事件监听，并安全地响应鼠标释放行为，避免内存泄漏与状态丢失。
在 React 中，直接操作 document.body（如添加/移除事件监听器）虽可行，但必须严格遵循其生命周期规则：监听器的注册与清理必须成对出现，且依赖状态变化精准控制。原生 JavaScript 中通过变量 active = false 控制状态的方式，在 React 函数组件中会导致状态丢失（每次渲染都会重置闭包中的局部变量），因此必须改用 useState 进行状态托管。
✅ 正确做法：用 useState + useEffect 管理全局事件
首先声明状态：
const [active, setActive] = useState(false);
接着定义鼠标按下处理函数——仅负责触发状态更新：
const handleMouseDown = () => {
setActive(true);
};最关键的是使用 useEffect 响应 active 变化：当 active 变为 true 时，向 document.body 添加 'mouseup' 监听器；当 active 变为 false 或组件卸载时，自动清理该监听器。注意：useEffect 的清理函数会确保事件处理器被精确解绑，杜绝内存泄漏。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
useEffect(() => {
if (!active) return;
const handleMouseUp = () => {
setActive(false);
};
document.body.addEventListener('mouseup', handleMouseUp);
// 清理函数：组件卸载或 active 变为 false 时自动执行
return () => {
document.body.removeEventListener('mouseup', handleMouseUp);
};
}, [active]);? 为什么不能在 useEffect 外部直接写 document.body.addEventListener？
因为它无法感知组件卸载，且无法响应 active 状态变化，极易造成重复绑定、监听器堆积或 setState 在已卸载组件上触发警告（如 “Can't perform a React state update on an unmounted component”）。
? 类名动态绑定：用状态驱动 CSS 类
无需 useRef 操作 DOM 元素来增删 class，推荐使用模板字符串动态组合 className：
<div
className={`scroller-middle ${active ? 'scrolling' : ''}`}
onMouseDown={handleMouseDown}
>
<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>这样既符合 React 的声明式理念，又避免了手动 DOM 操作，提升可维护性与可测试性。
⚠️ 关于 querySelector('.wrapper') 的说明
原生代码中 document.querySelector('.wrapper').getBoundingClientRect().left 属于读取布局信息，若需在 React 中复用，建议：
- 使用 useRef 获取目标元素（如 ）；
- 在 useEffect 或事件回调中调用 wrapperRef.current?.getBoundingClientRect()；
- 切勿在渲染函数中同步调用 getBoundingClientRect()，以免触发强制同步布局（layout thrashing）。
✅ 完整可运行示例（含 TypeScript 类型提示）
import { useState, useEffect, useRef } from 'react'; export default function ScrollHandler() { const [active, setActive] = useState(false); const handleMouseDown = () => setActive(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={handleMouseDown} > <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> </> ); }✅ 总结：三大核心原则
- 状态不可变：用 useState 替代普通变量，确保状态跨渲染持久；
- 副作用可控：所有 DOM 监听器必须在 useEffect 中注册与清理，依赖项数组 [active] 必须准确；
- 样式声明化：优先通过状态计算 className，而非 ref.current.classList.add/remove。
遵循以上模式，你不仅能安全监听 document.body，还能轻松扩展至 keydown、resize、scroll 等任意全局事件，同时保持 React 应用的健壮性与可预测性。
