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

Posted 2023-03-13

【中文标题】Angular Material - 扁平树和嵌套树之间的区别

【英文标题】：Angular Material - Difference between flat trees and nested trees

【发布时间】：2018-12-30 18:01:00

【问题描述】：

扁平树：

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

嵌套树：

在嵌套树中，子节点放置在 DOM 中的父节点内。父节点有一个出口来保存所有子节点。

我有一个包含 800 个元素的命名法，我使用扁平树显示。 我首先尝试使用嵌套树，因为它似乎是最合适的树。构建它需要眨眼，但是 DOM 加载树需要 5 秒，所以我尝试了扁平树，它现在可以完美运行。

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

扁平树的 DOM：

嵌套树更难构建，并且每次显示时都会明显地使 DOM 过载。嵌套树能做什么，扁平树不能？ Material 文档不清楚。

【参考方案1】：

无论是通过 Angular 动态呈现 html 还是简单地通过平面文件呈现 HTML，嵌套树都有一些明显的主要好处。

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

【参考方案2】：

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