React 组件重渲染时会重新生成整个 DOM 结构（或基于虚拟 DOM 差分更新），直接通过 JavaScript 操作 classList 添加的类名不会被 React 纳入状态管理，因此会在下一次渲染中被 className 属性的声明式值完全覆盖。
react
组件重渲染时会重新生成整个 dom 结构（或基于虚拟 dom 差分更新），直接通过 javascript 操作 `classlist` 添加的类名不会被 react 纳入状态管理，因此会在下一次渲染中被 `classname` 属性的声明式值完全覆盖。
在 React 应用中，UI 应始终由组件的
状态（state）和属性（props）
驱动，这是“声明式 UI”的核心原则。当你使用原生 JS（如 divElement.classList.add('command-mode')）手动修改 DOM 类名时，你绕过了 React 的渲染机制——这类操作属于
命令式副作用
，而 React 在每次重渲染时都会根据 className 属性的当前值（例如 clsx(...) 的返回结果）
完全接管并同步 DOM 的 class 列表
。这意味着：
任何未被 className 表达式包含的类名（如 JS 手动添加的 'active' 或 'highlight'）都会在重渲染后被清除；
即使该操作发生在 useEffect 中且未触发重渲染，一旦后续因 state 或 props 变化导致组件更新，className 将被重新计算并强制覆盖 DOM 的 class 属性。
✅ 正确做法：将所有类名逻辑统一收口到 className 属性中，并通过 React 状态控制。
例如，修正你的聊天输入框组件：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
⚠️ 注意事项：
避免混合命令式与声明式操作
：不要一边用 useState 控制 command-mode，又用 element.classList.add() 控制 highlighted；
若必须操作 DOM（如第三方库集成）
，确保在 useEffect 中同步状态，或使用 useLayoutEffect 做渲染前修复；
useMemo/useCallback 无法解决此问题——它们只优化计算或函数引用，不改变 className 覆盖 DOM 的行为；
所有视觉状态（包括临时交互态）都应映射为可序列化的 React state，才能保证服务端渲染（SSR）、React DevTools 调试及时间旅行调试的可靠性。
总结：React 不是“禁止操作 DOM”，而是要求 DOM 变更必须与组件状态保持因果一致。把类名当作状态的投影，而非独立的 DOM 目标，即可彻底规避此类丢失问题。
import { clsx } from 'clsx';
import { useState, useEffect, useRef } from 'react';
function ChatInputContainer({ chatBoxInputCommandMode }: { chatBoxInputCommandMode: string }) {
const [isHighlighted, setIsHighlighted] = useState(false);
const containerRef = useRef(null);
// 若需响应外部事件（如键盘快捷键）动态高亮，用状态驱动
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'h') {
setIsHighlighted(prev => !prev);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
return (
);
}