显示与隐藏

在我们到目前为止看到的例子中，我们的策略是有选择性地向页面添加或移除一部分标记。

然而，还有另一种解决这个问题的方法。根据你的背景，你可能对这种方法更加熟悉或更有信心。

我们可以使用 CSS 切换它们的可见性，而不是添加和删除整个 HTML 元素。

在 React 中，这看起来是这样的：

function Friend({ name, isOnline }) {
  const style = isOnline ? undefined : { display: "none" };
 
  return (
    <li>
      <div className="green-dot" style={style} />
      {name}
    </li>
  );
}

如果朋友在线， style 将是 undefined ，并且不会产生任何影响。将显示绿色圆点。

如果朋友离线，绿色点将应用 display: none ，有效地将其从用户界面中移除。

行内样式？

我在这里使用一种内联样式来设置 display: none ，因为这是演示这个概念最简单的方法。

有很多不同的方法来应用这个 CSS 声明，包括使用 CSS 类或使用 CSS-in-JS 解决方案。最终，所有这些选项只是通往同一个地方的不同道路，在这种情况下可以互换使用。

我们很快会更多地讨论 CSS！

比较方法

好的，我们可以选择有条件地渲染元素，使用我们看到的 JS 运算符，或者我们可以应用一些 CSS 来显示/隐藏元素。哪种方法更好？

从可用性的角度来看，这没有任何区别。使用 display: none 隐藏的元素在功能上从页面中移除。这在视觉上是正确的，在键盘导航和屏幕阅读器支持方面也是如此。

不过，确实存在一些有趣的性能差异。

DOM 节点仅凭存在就会消耗内存，无论它们是否对用户可见，在大型应用程序中有很多 DOM 节点时，使用条件渲染可以在任何给定时刻减少 DOM 节点的数量，从而降低消耗的内存量。

另一方面，将一个全新的 DOM 节点添加到页面的速度比切换 CSS 属性要慢得多。如果用户在切换内容（例如，展开一个手风琴菜单），使用 display 属性可能会更快。

也就是说，在大多数情况下，差异是如此微小，以至于实际上并不重要。

我建议：默认使用条件渲染。在低端设备上测试你的应用程序。如果你注意到某个特定的过渡感觉滞后，可以尝试其他方法，看看是否能改善体验。

这就是那种很容易陷入“过早优化”陷阱的情况。要小心！

显示与隐藏

比较方法

On this page