Javascript 使用CSS类或渲染状态更改提高反应效率？

这更像是一个性能问题

我的问题是，通过DOM操作或状态更改向元素添加/删除CSS类名（即添加“show”类名）更好？我确实发现，当目标DOM元素已知时，直接DOM操作“classList”肯定会更快

一个片段是：

const menuRef= React.createRef();

constructor(props) {
   super(props);
   /*if I am to use state*/
   //this.state = {isMenuShown: false}
}

_toggleShow = () => {
   //Changing states?
   /* this.setState({isMenuShown: !this.state.isMenuShown}); */
   if(this.menuRef.current) {
     if(!this.menuRef.current.classList.contains("show")) {
       this.menuRef.current.classList.add("show");
     }
     else {
       this.menuRef.current.classList.remove("show");
     }
   }  
}

render() {
  let ulClassName = "";
  /* If I am to use state*/
  //ulClassName = this.state.isMenuShown ? "show":"";
  return (
    <React.Fragment>
      <nav onClick={this._toggleShow)>
        <ul ref={this.menuRef} className={ulClassName}>
          <li>Sample 1</li>
          <li>Sample 2</li>
        </ul>
      </nav>
      <style jsx>{`
       ul {
          display: none;
       }
       ul.show {
          display: block;
          //I can add CSS @keyframes to display
          //Inner child elements relies on ".show" too for responsive design.
       }
     `}</style>
  </React.Fragment>
);

const menuRef=React.createRef（）；
建造师（道具）{
超级（道具）；
/*如果我要使用状态*/
//this.state={IsMenuShowed:false}
}
_切换显示=（）=>{
//改变状态？
/*this.setState（{IsMenuShowed:！this.state.IsMenuShowed}）*/
如果（此菜单当前）{
如果（！this.menuRef.current.classList.contains（“show”））{
this.menuRef.current.classList.add（“show”）；
}
否则{
this.menuRef.current.classList.remove（“show”）；
}
}  
}
render（）{
让ulClassName=“”；
/*如果我要使用状态*/
//ulClassName=this.state.ismenushowed？“show”：“；
返回(

样本1
样本2

{`
保险商实验室{
显示：无；
}
ul.show{
显示：块；
//我可以添加CSS@关键帧来显示
//内部子元素也依赖“.show”进行响应性设计。
}
`}
);

}

我知道状态是最好的选择，但上面的场景证明（至少对我来说）在严重依赖CSS的情况下DOM操作会更好。以CSS使用为例，如下所示：

• 内部儿童响应设计
• 使用CSS@关键帧的动画

---

你真的会用什么，或者是怎么来的？将来DOM操作真的会给任何人带来问题吗？

我认为在react中直接操作DOM元素是一种反模式。这是可行的，但不推荐

---

作为旁注，我使用名为

classnames

的节点模块来帮助切换在

className

属性上使用的渲染元素。它通过根据您提供的逻辑处理类的添加或删除来实现这一点

啊，这是对类名的一个很好的附加。我曾考虑过反模式，但重新渲染会导致大量过度重写到浏览器中。让React为您处理此问题，因为协调引擎会执行所有繁重的任务来优化更新。我建议大家阅读参考文献以及何时使用它们。谢谢丹尼斯，我读过了，哇，这真的是我需要的答案。现在我明白了为什么州是前进的方向，并且将贯穿整个高级部分。