React.js中如何正确修改组件类？三种方案合理性探讨

核心疑问 #

• React里修改组件类名有多种实现方式，哪种是正确的实践方案？
• 用useState会触发组件重渲染，仅修改影响外观的类名时，重渲染是否合理？
• 直接操作事件目标的SuperSimpleComponent是否符合React规范？

三种实现方式的对比 #

1. useState驱动方案（UsingStateComponent） #

function UsingStateComponent(){
  const [newClass, setNewClass] = React.useState(null);
  return <button className={newClass} onClick={()=>{setNewClass('new')}}>useState</button>
}

这是React的标准状态驱动方案，类名由组件状态控制，完全符合React单向数据流的设计理念。

关于重渲染的疑问：React的重渲染是虚拟DOM层面的对比，并非“重渲染整个组件”——它会通过diff算法精准找出需要更新的DOM属性（这里仅更新className），实际DOM操作开销极小，对于大多数简单组件来说完全可以忽略。而且如果后续这个类名状态需要和其他业务逻辑联动（比如根据状态禁用按钮、同步到父组件等），这个方案的扩展性是最好的。

2. useRef直接操作DOM方案（UsingRefComponent） #

function UsingRefComponent(){
  const ref = React.useRef();
  return <button ref={ref} onClick={()=>{ref.current.classList.add("new");}}>useRef</button>
}

通过useRef获取DOM元素后直接修改类名，绕过了React的状态管理，不会触发组件重渲染。

这种方式适合不需要状态同步的纯UI临时变化场景，但存在明显缺陷：如果组件因为父组件更新等原因触发重渲染，React会根据虚拟DOM重新生成DOM元素，手动添加的类名可能被覆盖（除非在useEffect中重新处理类名逻辑），稳定性不如状态驱动方案。

3. 直接操作事件目标方案（SuperSimpleComponent） #

function SuperSimpleComponent(){
  return <button onClick={(e)=>{e.preventDefault(); e.target.classList.add("new")}}>simple event target</button>
}

这是最直接的原生DOM操作，本质和useRef方案一致——绕开React状态管理直接修改DOM。它确实简洁，但同样存在重渲染丢失类名的问题，且完全脱离React的状态体系：如果后续需要基于这个类名状态做逻辑判断（比如判断按钮是否激活）、或同步到其他组件，会变得非常困难，不符合React“状态驱动UI”的核心原则。

实践建议 #

• 如果类名只是临时、无状态关联的纯UI变化（比如单次点击高亮），可以用event.target或useRef，但要注意组件重渲染可能导致类名丢失的问题。
• 如果类名需要和组件状态联动、或后续有扩展需求，必须使用useState（或其他状态管理方案）——这是符合React设计规范的标准做法，所谓的重渲染开销在绝大多数场景下都可以忽略。
• SuperSimpleComponent仅适合极简单的一次性DOM操作场景，不建议在复杂组件或需要状态同步的场景中使用。

内容的提问来源于stack exchange，提问作者Tom