React.js 中隐藏组件的正确方法
Correct way to hide components in React.js
假设您正在将一个名为 show 的道具传递给一个组件。如果 prop 值为 true，则应该正常渲染整个组件。如果它是假的，你不应该显示任何东西。
您可以通过两种方式完成此操作。
- return组件的render方法中为null。
- 将包含
display: none 属性的 CSS class 应用于组件的 DOM 元素。
哪些是正确的或首选的方法？
如果您认为在该页面生命周期内需要再次显示该组件，那么我建议使用 css 方式，因为在这种情况下对 DOM 操作的影响会更小.在其他一些情况下，返回 null 可能会更有帮助。
我认为这个问题不会有任何确定的答案。
每种方法都有其优点和缺点。
CSS 你有：
- 它可能工作得更快
- 如果再次显示控件，则无需考虑恢复子控件状态。
返回 null:
- 渲染的总数 DOM 可能要小得多。如果您有许多可能被隐藏的此类组件，这一点很重要。
- 渲染后不会发生碰撞 html。假设您有表格视图。每个选项卡都是自己的复杂表单，带有许多子控件。如果你有一些原始 javascript/jquery/whatever 与他们的 ids/classnames 等一起工作 - 很难确保每个 tab/form 都有唯一的 ID，除非你不渲染它们。
从我的角度来看，决定将基于您的控件的结构。如果它有许多嵌套子项的复杂结构，并且您没有任何方法可以在再次打开时恢复它们的状态 - 请使用 CSS，但我会说这只是非常简单的控件的短期解决方案。在所有其他情况下，我会不渲染组件。
在大多数情况下，您的两个解决方案是可以互换的。他们都"work"很好。
我会警告不要在选择这些方法中选择哪种方法时进行先发制人的优化。如果您确实需要最终修改您的代码并尝试其他方法，那么这是一个非常简单的交换，不应该成为障碍。所以在有理由担心之前不要担心。
我是OP。
如果根据屏幕尺寸隐藏组件，CSS 媒体查询和 display: none 如果应用使用 react-snap 之类的东西预呈现，效果最佳。这是因为，如果预渲染设备和查看设备不匹配，如果组件隐藏逻辑在 JS 中，则应用重新水化时布局会发生变化。
与此相关，我们需要注意的是，即使组件没有“显示”CSS display: none，组件仍然存在，如果有效果，它们仍然会火.
假设您正在将一个名为 show 的道具传递给一个组件。如果 prop 值为 true，则应该正常渲染整个组件。如果它是假的，你不应该显示任何东西。
您可以通过两种方式完成此操作。
- return组件的render方法中为null。
- 将包含
display: none属性的 CSS class 应用于组件的 DOM 元素。
哪些是正确的或首选的方法？
如果您认为在该页面生命周期内需要再次显示该组件，那么我建议使用 css 方式，因为在这种情况下对 DOM 操作的影响会更小.在其他一些情况下，返回 null 可能会更有帮助。
我认为这个问题不会有任何确定的答案。 每种方法都有其优点和缺点。
CSS 你有：
- 它可能工作得更快
- 如果再次显示控件，则无需考虑恢复子控件状态。
返回 null:
- 渲染的总数 DOM 可能要小得多。如果您有许多可能被隐藏的此类组件，这一点很重要。
- 渲染后不会发生碰撞 html。假设您有表格视图。每个选项卡都是自己的复杂表单，带有许多子控件。如果你有一些原始 javascript/jquery/whatever 与他们的 ids/classnames 等一起工作 - 很难确保每个 tab/form 都有唯一的 ID，除非你不渲染它们。
从我的角度来看，决定将基于您的控件的结构。如果它有许多嵌套子项的复杂结构，并且您没有任何方法可以在再次打开时恢复它们的状态 - 请使用 CSS，但我会说这只是非常简单的控件的短期解决方案。在所有其他情况下，我会不渲染组件。
在大多数情况下，您的两个解决方案是可以互换的。他们都"work"很好。
我会警告不要在选择这些方法中选择哪种方法时进行先发制人的优化。如果您确实需要最终修改您的代码并尝试其他方法，那么这是一个非常简单的交换，不应该成为障碍。所以在有理由担心之前不要担心。
我是OP。
如果根据屏幕尺寸隐藏组件，CSS 媒体查询和 display: none 如果应用使用 react-snap 之类的东西预呈现，效果最佳。这是因为，如果预渲染设备和查看设备不匹配，如果组件隐藏逻辑在 JS 中，则应用重新水化时布局会发生变化。
与此相关，我们需要注意的是，即使组件没有“显示”CSS display: none，组件仍然存在，如果有效果，它们仍然会火.