javascript - `display: none` 与 React 中的条件渲染

Question

我无法确定 React 中这两种渲染模式之间的区别。希望有人可以阐明这个问题。

模式一: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: 显示:无

.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:如果 super 简单(例如悬停)，则使用 CSS，如果涉及更多逻辑，则条件渲染