Реагировать на эффективность с помощью CSS-класса или изменения состояния рендера?

Question

Это больше вопрос производительности React.

Мой вопрос был бы таков: добавление / удаление имени класса CSS (т.е. добавление имени класса show) к элементу лучше с помощью манипулирования DOM или изменение состояния ?Я считаю, что прямое манипулирование DOM "classList" определенно быстрее, когда целевой элемент DOM уже известен.

Фрагмент был бы:

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>
);

}

Я знаю, что состояния - это рекомендуемый путь, но сценарий выше оправдывает (по крайней мере для меня), что DOMманипулирование лучше, когда на CSS сильно полагаются.Вот пример использования CSS:

• Внутренний дочерний дизайн.
• Анимация с использованием CSS @ keyframes

Что бы вы на самом деле использовали или какодин пришел?В будущем манипуляции с DOM создавали проблемы для кого-либо?

Answer 1

Я считаю, что непосредственное манипулирование DOM-элементами внутри реакции - это анти паттерн.Это выполнимо, но не рекомендуется.

В качестве примечания, я использую модуль узла с именем classnames, чтобы помочь переключать визуализированные элементы, которые используются прямо на className проп.Это достигается путем обработки добавления или удаления классов на основе предоставленной вами логики.