显示和隐藏组件与销毁和重新创建组件

Question

我有一个多步骤表格。我有6-7步，现在我已经设计了系统，就像每一步都是一个组件。当用户切换到下一步时，将销毁上一步组件并初始化新步骤组件。所以我有6-7个组件。显示和隐藏组件是更好还是破坏并重新创建组件更好。

Answer 1

可能会破坏并创造......

Angular在实例化新组件/组件内容时访问阴影dom，这对性能负担要小得多：

  

Shadow DOM是指浏览器将DOM元素子树包含到文档呈现中的能力，但不包含在主文档DOM树中......对DOM的更改通常会导致重新呈现这页纸。 Ref

此外，如果你只是展示和隐藏，那么你将会错过所有方便的生命周期钩子，角度框架为你提供了围绕＆＃34;显示/渲染＆＃34;屏幕上的组件; ngOnInit，ngAfterViewInit等。

再进一步注意，通过css隐藏/显示元素不操纵DOM，我推荐的主要原因是生命周期挂钩，并且当删除阴影dom内容时，它更少明智的负担。

Answer 2

如果需要，您可以使用：

• console.time（）
• console.profile（）
• performance.now（）

计算性能并比较两种解决方案。

您可以在下面找到使用示例：

https://developers.google.com/web/tools/chrome-devtools/console/console-reference#time

https://developers.google.com/web/tools/chrome-devtools/console/console-reference#profile

https://developer.mozilla.org/en-US/docs/Web/API/Performance/now