React 中应避免直接操作 DOM 绑定事件，而应使用状态驱动视图更新；通过 useState 控制显隐状态，并配合内联事件处理函数，可彻底消除因手动 DOM 监听导致的重复渲染和副作用隐患。
react 中应避免直接操作 dom 绑定事件，而应使用状态驱动视图更新；通过 `usestate` 控制显隐状态，并配合内联事件处理函数，可彻底消除因手动 dom 监听导致的重复渲染和副作用隐患。
在 React 开发中，直接使用 document.querySelectorAll 和原生 addEventListener 是反模式做法，它绕过了 React 的声明式数据流与生命周期管理，不仅容易引发重复渲染、内存泄漏、状态不同步等问题，还会让组件难以测试和维护。
你遇到的“点击后重渲染两次”，本质并非性能瓶颈，而是副作用逻辑（DOM 操作 + 事件监听）与 React 渲染机制冲突所致：
-
useEffect中未清理事件监听器，导致组件卸载或更新时旧监听器残留； -
useEffect依赖数组为空[]，但内部引用了未声明为依赖项的toogleInner（闭包捕获旧状态），造成状态更新异常； -
classList.toggle('hide')直接修改 DOM，React 无法感知变化，后续 re-render 可能覆盖或冲突 DOM 状态。
✅ 正确做法：用状态（state）描述 UI，用事件处理器更新状态，让 React 自动同步 DOM
以下是优化后的标准 React 实现：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
import { useState } from 'react';
export default function LoginForm() {
const [isVisible, setIsVisible] = useState(true);
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
// 仅当点击的是背景遮罩层（非子元素）时关闭
if (e.target === e.currentTarget) {
setIsVisible(false);
}
};
return (
<div
className={`inner ${!isVisible ? 'hide' : ''}`}
onClick={handleBackdropClick}
>
<div className="contentSign">
<div className="form">
<h2>Đăng nhập</h2>
<span className="exit" onClick={(e) => {
e.stopPropagation(); // 阻止冒泡，避免触发父级 backdrop 关闭
setIsVisible(false);
}}>
X
</span>
</div>
</div>
</div>
);
}? 关键改进说明：
-
状态驱动：
isVisible真实反映 UI 可见性，className动态绑定确保样式与状态严格一致； -
事件委托更安全：外层
div.inner响应背景点击，span.exit响应关闭按钮，两者通过e.stopPropagation()解耦； - 无副作用：不操作 DOM、不手动添加/移除监听器，完全交由 React 管理渲染与事件；
-
可预测性高：每次点击只触发一次
setIsVisible，React 合并状态更新，确保单次 render； -
自动清理：无需
useEffect cleanup，无内存泄漏风险。
⚠️ 注意事项：
- 不要为“减少渲染次数”而牺牲可维护性——React 的 diff 和批量更新已高度优化，除非真实性能瓶颈（如千级列表滚动卡顿），否则无需 micro-optimization；
-
useCallback/React.memo适用于子组件接收大量 props 且频繁 re-render 的场景，本例中无复杂子组件或高开销计算，无需引入； - 若需全局模态框逻辑（如多处调用），可进一步封装为自定义 Hook（如
useModal），但仍应基于 state + event handler，而非 DOM 操作。
遵循 React 的数据流范式——状态 → JSX → 用户交互 → 更新状态——才能写出简洁、健壮、可扩展的代码。
