重新安装与设置显示之间的性能和内存差异=“无”
Posted
技术标签:
【中文标题】重新安装与设置显示之间的性能和内存差异=“无”【英文标题】: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 的设计方式背道而驰
【参考方案1】:
我认为这与最佳实践或性能无关。这完全取决于您要达到的目标。
请记住以下几点:
安装/重新安装总是会重置组件的状态并重新运行 useEffect 挂钩(这在 react 的世界中非常有用)。这意味着如果您使用例如步进器并在步骤之间移动,假设您填写一些表单,然后前后移动,您的组件将失去其先前的状态并且您的表单将被清空(因为它们再次被挂载)。
但是,如果您使用 display = none,则组件的状态是持久的,并且您的表单将填充以前的值。 (很明显,您可以使用第一种方法实现相同的行为,但您需要付出一些努力才能做到这一点,这种努力会在以后为您节省一些时间)
我并不是说一个比另一个更好,但是在选择一个而不是另一个之前,你必须知道一些严肃的考虑
(不要使用 display=none 除非你有一些严重的 css 技巧)
【讨论】:
以上是关于重新安装与设置显示之间的性能和内存差异=“无”的主要内容,如果未能解决你的问题,请参考以下文章
iPhone:NSURLRequestCachePolicy 设置之间的性能差异
.where(...).Any() 与 ..Any(...) 之间的性能差异 [重复]
之间的用法差异。 a.out、.ELF、.EXE 和 .COFF
UIView: alpha:0, hidden:YES, removeViewFromSuperview 和 frame.origin.y = -100000 之间的性能/内存差异;