Angular Material - 扁平树和嵌套树之间的区别

Question

扁树：

在扁平树中，层次结构是扁平化的；节点不会在彼此内部渲染，而是按顺序渲染为兄弟节点

嵌套树：

在嵌套树中，子节点放置在 DOM 中其父节点内部。父节点有一个插座来保存所有子节点。

我有一个 800 个元素的命名法，我使用扁平树来显示。
我首先尝试使用嵌套树，因为它看起来是最合适的树。构建它需要眨眼的时间，但是 DOM 需要 5 秒来加载树，所以我尝试了扁平树，现在它工作得很好。

问题是，如果平面树的结果相同，那么使用嵌套树有什么意义？树被正确渲染并且 DOM 理解它的层次结构。

Flat 树的 DOM：

嵌套树更难构建，并且每次显示时都会明显超载 DOM。什么是嵌套树可以做而扁平树不能做的事情？材料文档不清楚。

Answer 1

无论 HTML 是通过 Angular 动态渲染还是只是一个平面文件，嵌套树都有一些明确的主要好处。

• 您可以利用事件冒泡，这可以大大减少捕获用户与 DOM 交互所需编写的代码量。此外，当您需要捕获多个事件时，嵌套也可以使这一过程变得更容易。
• 通过能够将样式应用于将由子元素继承的父节点，您可以更好地控制格式。
• 使用 LESS 或 Sass 等 CSS 预处理器时，嵌套树有巨大的好处。大大减少了需要编写的样式数量。
• 虽然渲染两棵树之间的性能可能相同，但当您必须考虑连接速度慢或移动服务差的用户时，经验法则是 DOM 元素越少越好。

Answer 2

Angular Material 文档 现在提供了有关这两种方法优点的更多信息。该文档指出：

• 扁平树通常更容易设计和检查。它们对滚动变化也更友好，例如无限滚动或虚拟滚动。扁平树通常可以提供更好的性能。
当层次关系以平面节点难以实现的方式直观地表示时，
• 嵌套树更容易使用。

Answer 3

您还必须考虑这样一个事实，即 flatTrees 会在渲染之前尝试展平您的树，因此拥有 3000 个节点的树对于 flatTree 来说会很痛苦，因为它将浏览所有节点以从中构建列表。这可能非常消耗。