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

使用 CSS 你有：

• 它可能工作得更快
• 如果再次显示控件，则无需考虑恢复子控件状态。

随着返回null：

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

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

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

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

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

我是 OP。

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

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