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

Question

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

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

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

任何见解？

Answer 1

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

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

Answer 2

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

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

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

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