在 React.js 中隐藏组件的正确方法答案

【问题标题】：Correct way to hide components in React.js在 React.js 中隐藏组件的正确方法
【发布时间】：2017-11-17 12:13:05
【问题描述】：

假设您将一个名为 show 的 prop 传递给一个组件。如果 prop 值为 true，则应正常渲染整个组件。如果它是假的，你不应该显示任何东西。

您可以通过两种方式做到这一点。

哪些是正确的或首选的方式？

【问题讨论】：

【解决方案1】：

我认为这个问题不会有任何明确的答案。每种方法都有其优点和缺点。

使用 CSS 你有：

返回null:

渲染的总 DOM 可能要小得多。如果您有许多可能隐藏的此类组件，这一点很重要。
呈现的 html 中不会发生冲突。假设您有表格视图。每个选项卡都是它自己的复杂表单，带有许多子控件。如果你有一些原始的 javascript/jquery/whatever 使用它们的 ids/classnames 等 - 很难确保每个选项卡/表单都有唯一的 id，除非你不渲染它们。

在我看来，决定将基于您的控件结构。如果它具有包含许多嵌套子项的复杂结构，并且您无法在再次打开时恢复它们的状态 - 使用 CSS，但我会说这只是非常简单的控件的短期解决方案。在所有其他情况下，我会选择不渲染组件。

【讨论】：

【解决方案2】：

如果您认为在该页面生命周期内需要再次显示组件，那么我建议使用 css 方式，因为在这种情况下对 DOM 操作的影响会更小。在其他一些情况下，可能返回 null 会更有帮助。

【讨论】：

【解决方案3】：

在大多数情况下，您的两种解决方案是可以互换的。他们都“工作”得很好。

在选择这些方法中的哪一种时，我会警告不要进行抢先优化。如果您确实需要最终修改您的代码并尝试其他方法，那么这是一个非常简单的交换，不应该成为障碍。所以在有理由担心之前不要担心。

【讨论】：

【解决方案4】：

我是 OP。

如果组件根据屏幕大小隐藏，则 CSS 媒体查询和 display: none 如果使用诸如 react-snap 之类的东西预渲染应用程序，则效果最佳。这是因为，如果预渲染设备和查看设备不匹配，如果组件隐藏逻辑在 JS 中，则应用重新水化时布局会发生变化。

与此相关，我们需要注意即使组件没有使用 CSS display: none“显示”，组件仍然存在，如果有效果，它们仍然会触发。

【讨论】：