`display: none` vs React 中的条件渲染答案

【问题标题】：`display: none` vs conditional render in React`display: none` vs React 中的条件渲染
【发布时间】：2017-08-22 23:24:32
【问题描述】：

我很难确定 React 中这两种渲染模式之间的区别。希望有人能对这个问题有所了解。

模式 1：React 的条件渲染

https://facebook.github.io/react/docs/conditional-rendering.html

class List extends React.Component {
  state = {
    menu: false,
  }
  handleMouseOver = () => {
    this.setState({
      menu: true
    });
  }
  handleMouseLeave = () => {
    this.setState({
      menu: false
    });
  }
  render() {
    const { menu } = this.state;

    return (
      <li
        onMouseOver={this.handleMouseOver}
        onMouseLeave={this.handleMouseLeave}
      >
        {menu && <Menu />}
      </li>
    );
  }
}

模式 2： display: none

.menu {
  display: none;
}

.li:hover .menu {
  display: block;
}

const List = () => (
  <li className="li"><Menu className="menu"/></li>
);

问题：

如果我需要在一个页面中呈现 100 个这样的项目，我应该采用哪种模式？

如何确定哪种模式更好？

使用其中一种是否有任何性能优势？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

我倾向于在有简单条件（例如悬停等）的情况下使用display: none。如果它有点复杂（例如单击复选框以隐藏元素），那么我会使用条件渲染。这背后的原因是我不想导致状态更改并触发像悬停状态这样微不足道的事情的更新，并且不想为无论如何都必须涉及代码的事情摆弄晦涩的 css 类。

同样，这是我个人的喜好。

TL;DR：CSS 如果超级简单（例如悬停），如果涉及更多逻辑，则条件渲染

【讨论】：