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如果超级简单（例如悬停），条件渲染，如果涉及更多逻辑

在React中`display：none` vs条件渲染

1 个答案: