重新安装与设置显示之间的性能和内存差异=“无”答案

【问题标题】：Performance and memory difference between re-mounting vs setting display = "none"重新安装与设置显示之间的性能和内存差异=“无”
【发布时间】：2021-12-23 04:29:29
【问题描述】：

我有一个用 React 编写的单页应用程序。该应用程序有多个页面，当用户单击导航栏上的选项卡时可以显示这些页面。所以有两种可能的设计：

一次安装 1 个页面；每当用户通过单击选项卡在页面之间切换时卸载和重新安装。
同时挂载所有页面，只显示选择的页面，其余设置为display = "none"。

问题：

在速度性能方面哪个更好。
在内存性能方面哪个更好。
什么是标准做法？

【问题讨论】：

您可以按需加载页面，然后在不再需要时隐藏它们，这样您就不需要两次加载同一页面。
看看React Router 是如何处理这个问题的可能会有用——虽然它们绑定到 URL 路由而不是路径，但我想这不会显着影响实现。
@Spectric 那么是Design 2?
@free_lions_n_tigers_from_cages 这将是两者的结合。只在用户请求时加载页面，但是当用户请求另一个页面时，隐藏上一个页面，所以当用户请求上一个页面时，而不是再次加载它，只是显示它。
我没有关于性能的具体数据，但 React 是围绕第一个选项构建的，所以我认为可以安全地假设这是性能更高的方式（这绝对是标准做法）。随着您的应用程序的增长，维护第二种方法将非常混乱，并且您将与 React 的设计方式背道而驰

标签： javascript html css reactjs frontend

【解决方案1】：

我认为这与最佳实践或性能无关。这完全取决于您要达到的目标。

请记住以下几点：

安装/重新安装总是会重置组件的状态并重新运行 useEffect 挂钩（这在 react 的世界中非常有用）。这意味着如果您使用例如步进器并在步骤之间移动，假设您填写一些表单，然后前后移动，您的组件将失去其先前的状态并且您的表单将被清空（因为它们再次被挂载）。

但是，如果您使用 display = none，则组件的状态是持久的，并且您的表单将填充以前的值。（很明显，您可以使用第一种方法实现相同的行为，但您需要付出一些努力才能做到这一点，这种努力会在以后为您节省一些时间）

我并不是说一个比另一个更好，但是在选择一个而不是另一个之前，你必须知道一些严肃的考虑

（不要使用 display=none 除非你有一些严重的 css 技巧）

【讨论】：