javascript - 使用 CSS 类或渲染状态更改来提高效率？

Question

这更像是一个 React 性能问题。

我的问题是，通过DOM 操作 或状态更改 向元素添加/删除 CSS 类名(即添加“显示”类名)更好？我确实发现当目标 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>
);

我知道状态是建议的方式，但上面的场景证明(至少对我而言)当严重依赖 CSS 时，DOM 操作更好。以 CSS 用法为例:

• 内在 child 响应设计。
• 使用 CSS @keyframes 制作动画

您真正会用到什么，或者如何解决这个问题？将来 DOM 操作真的会给任何人带来问题吗？

Answer 1

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

作为旁注，我使用名为 classnames 的节点模块来帮助切换在 className 属性上使用的渲染元素。它通过根据您提供的逻辑处理类的添加或删除来实现这一点。