本文介绍一种符合 react 最佳实践的方式：使用状态驱动 ui 变化，而非直接操作 dom，从而自然规避手动事件监听导致的重复渲染、副作用失控等问题。
本文介绍一种符合 react 最佳实践的方式：使用状态驱动 ui 变化，而非直接操作 dom，从而自然规避手动事件监听导致的重复渲染、副作用失控等问题。
在你提供的代码中，通过 useRef 获取 DOM 元素并手动添加 addEventListener，不仅违背了 React 的声明式设计哲学，还极易引发以下问题：
-
重复挂载监听器：
useEffect缺少依赖数组（空数组[]被省略），导致每次渲染都重新执行，可能多次绑定相同事件，造成内存泄漏或逻辑错乱； -
绕过 React 状态机制：直接调用
classList.toggle()修改 DOM，使组件内部状态与 UI 不同步，React 无法感知变化，后续setState或父组件更新可能触发意外重渲染； -
useEffect清理缺失：未返回清理函数移除事件监听器，导致卸载后仍存在悬空引用； -
toogleInner函数未稳定：未用useCallback包裹，在每次渲染中都是新函数，若作为子组件 props 传递可能引发子组件无效重渲染（虽本例未体现，但属潜在风险）。
✅ 正确做法是：用 useState 控制显隐状态，用内联事件处理器（如 onClick）触发状态更新，让 React 自动调度高效、可预测的渲染。
以下是重构后的推荐写法：
Auth0 React Native
下载
用于在React Native或Expo移动应用（iOS/Android）中添加生物识别认证——集成react-native-auth0 SDK与原生深度...
import { useState } from 'react';
export default function LoginForm() {
const [isVisible, setIsVisible] = useState(true);
return (
<div className={`inner ${!isVisible ? 'hide' : ''}`}>
<div className="contentSign">
<div className="form">
<h2>Đăng nhập</h2>
<span className="exit" onClick={() => setIsVisible(false)}>
X
</span>
</div>
</div>
</div>
);
}? 关键改进说明：
- ✅ 状态即真相源（Source of Truth）：
isVisible是唯一决定.inner是否显示的状态，CSS 类名通过三元表达式动态控制，完全交由 React 管理； - ✅ 事件处理简洁可靠：
onClick直接调用setIsVisible(false)，语义清晰、无副作用、无需手动清理； - ✅ 自动防抖重渲染：React 对连续
setState有批处理优化，即使快速点击也不会“渲染两次”——你观察到的“重渲染两次”实为副作用逻辑错误（如重复绑定 +toggle冲突）导致的视觉/行为异常，而非 React 渲染本身低效； - ✅ 可扩展性强：如需支持 Esc 键关闭，只需补充
useEffect监听keydown并检查e.key === 'Escape'，仍基于状态更新，逻辑统一。
⚠️ 注意事项：
- 不要为了“减少渲染次数”而牺牲可维护性。React 的虚拟 DOM 和 Diff 算法已高度优化，千级节点下的重渲染耗时通常低于 1ms；
- 若真实场景中存在性能瓶颈（如列表项上千、复杂计算），应优先使用
React.memo、useMemo、useCallback等做针对性优化，而非回避状态管理； - 所有 DOM 操作（尤其
querySelectorAll、addEventListener）应严格限制在useEffect的清理函数中配对出现，并确保依赖数组完整。
遵循“状态驱动 UI”原则，你的代码将更健壮、易测试、易协作——这才是提升 React 技能的核心路径。
