`display：none` vs条件渲染

Question

我在决定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个这些项目，应该采用哪种模式？

如何确定哪种模式更好？

使用一个相对于另一个有任何性能上的好处吗？

Answer 1

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

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

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