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

Question

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

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

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

任何见解？

Answer 1

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

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

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

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

Answer 2

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

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