本文讲解如何用 react 状态机制（而非直接操作 dom）优雅地控制组件显隐，消除因错误使用 ref 和原生事件监听导致的重复渲染问题，并提升代码可维护性与可预测性。
本文讲解如何用 react 状态机制（而非直接操作 dom）优雅地控制组件显隐，消除因错误使用 ref 和原生事件监听导致的重复渲染问题，并提升代码可维护性与可预测性。
在 React 开发中，直接操作 DOM 并手动绑定事件监听器（如 addEventListener）不仅违背 React 的声明式设计哲学，还极易引发状态不一致、内存泄漏和意外重渲染等问题。你提供的代码中，useEffect 内未指定依赖数组（即空数组 [] 缺失），且在每次渲染后都重新查询 DOM 节点并重复绑定事件，这会导致：
- 多次调用
addEventListener→ 事件被重复注册 → 点击一次触发多次回调 → 表面“重渲染两次”（实为toogleInner被执行多次，多次修改 class）； -
useRef存储的是原生 DOM 节点，无法触发 React 更新，而classList.toggle('hide')属于副作用，绕过了 React 的状态管理，使组件行为难以追踪和测试。
✅ 正确解法：交由 React 管理 UI 状态，用 useState 控制显隐，用内联事件处理器（如 onClick）响应用户交互。
以下是重构后的完整示例（支持点击遮罩层关闭 + 点击“X”关闭）：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
import { useState } from 'react';
export default function LoginForm() {
const [isVisible, setIsVisible] = useState(true);
// 点击遮罩区域（.inner）时，仅当点击的是容器本身（非子元素）才关闭
const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget) {
setIsVisible(false);
}
};
return (
<div
className={`inner ${!isVisible ? 'hide' : ''}`}
onClick={handleOverlayClick}
>
<div className="contentSign">
<div className="form">
<h2>Đăng nhập</h2>
<span className="exit" onClick={(e) => {
e.stopPropagation(); // 阻止冒泡到 .inner，避免重复触发
setIsVisible(false);
}}>
X
</span>
</div>
</div>
</div>
);
}? 关键改进说明：
- ✅ 状态驱动 UI：
isVisible是唯一数据源，className动态计算，React 自动高效更新 DOM； - ✅ 事件委托清晰：
.exit使用onClick并调用e.stopPropagation()，防止事件冒泡至父级.inner，彻底避免重复关闭逻辑； - ✅ 无 DOM 操作：删除全部
useRef+document.querySelectorAll+addEventListener，杜绝手动同步风险； - ✅ 符合 React 生命周期：组件卸载时无需手动移除监听器，无内存泄漏隐患。
⚠️ 注意事项：
- 不要滥用
useCallback或React.memo进行过早优化——本例中根本无需它们；React 的默认渲染性能对普通交互完全足够； - 若需更复杂逻辑（如动画、过渡效果），可配合
CSSTransition（react-transition-group）或framer-motion实现，仍基于状态驱动； - 所有用户交互应映射为状态变更，而非直接修改 DOM —— 这是写出可维护 React 应用的核心原则。
遵循这一模式，你的组件将更健壮、易测试、易协作，也真正发挥出 React 的优势。
