是否更好的做法是在React中有条件地渲染或有条件地添加一个类来隐藏元素

Question

至于我的React经验到目前为止,我有两种方法可以隐藏一些基于props/state的React组件输出/渲染的渲染HTML:

• 用一些条件逻辑包围有问题的HTML/JSX,或者
• 有条件地向该元素添加一个类,让CSS控制显示/可见性

我想知道哪种是最佳做法？我有一种预感,即使用CSS方法可以获得一些性能提升,因为浏览器不需要大量操作DOM.或者,将元素从DOM中完全删除有时会很好.

任何见解？

Answer 1

从性能角度来看：react 智能地最小化 DOM 重新渲染，包括如果您更改<li>DOM中的项目列表（例如项目）的特殊处理。而且反应真的很快。尚未测试，但我认为性能上的任何差异都是微乎其微的。

如果所讨论的组件是纯 HTML，那么我通常会在两种隐藏元素的方式之间应用以下经验法则：

• 对于作为 UI 一部分的组件，可以由用户多次打开和关闭（例如下拉菜单、工具提示、弹出窗口等）：使用 CSS 隐藏/显示，可能在反应中有条件地添加类。
• 对于仅呈现和隐藏​​一次的组件（例如，从列表中删除一项，关闭一次性模态弹出窗口等）：使用条件呈现。

注意：对于不只包含 HTML 的组件，例如包含输入字段或按钮的组件，或者对于 React 组件，最好让 react 从 DOM 中删除它们。让反应也很好地清理可能的事件侦听器等。

Answer 2

我在这里问了类似的问题，并收到了React核心团队成员之一Sophie Alpert的答复。

基本上，在大多数情况下，最好不要完全渲染HTML，前提是该HTML在整个页面的生命周期中都保持这种状态。如果需要频繁切换，请使用CSS来显示/隐藏元素。