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 状态控制。
例如，修正你的聊天输入框组件：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
import { clsx } from 'clsx';
import { useState, useEffect, useRef } from 'react';
function ChatInputContainer({ chatBoxInputCommandMode }: { chatBoxInputCommandMode: string }) {
const [isHighlighted, setIsHighlighted] = useState(false);
const containerRef = useRef<htmldivelement>(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 (
<div ref="{containerRef}" classname="{clsx(" chatboxinputcommandmode ishighlighted></div>
);
}</htmldivelement>
⚠️ 注意事项：
- 避免混合命令式与声明式操作：不要一边用 useState 控制 command-mode，又用 element.classList.add() 控制 highlighted；
- 若必须操作 DOM（如第三方库集成），确保在 useEffect 中同步状态，或使用 useLayoutEffect 做渲染前修复；
- useMemo/useCallback 无法解决此问题——它们只优化计算或函数引用，不改变 className 覆盖 DOM 的行为；
- 所有视觉状态（包括临时交互态）都应映射为可序列化的 React state，才能保证服务端渲染（SSR）、React DevTools 调试及时间旅行调试的可靠性。
总结：React 不是“禁止操作 DOM”，而是要求 DOM 变更必须与组件状态保持因果一致。把类名当作状态的投影，而非独立的 DOM 目标，即可彻底规避此类丢失问题。
