Dom操作将重新构建整个DOM结构

Question

从第二节下面的链接中我可以看到这样的陈述：“举个例子，假设你有一个包含10个项目的列表。你勾选了第一个项目。大多数JavaScript框架都会重建整个列表。这比必要的工作多了十倍！只有一项发生了变化，但剩下的9个项目被重建成了原来的样子。重建一个列表对web浏览器来说并不是什么大问题，但现代网站可能会使用大量的DOM操作。低效的更新已经成为一个严重的问题。”这个可以详细解释一下吗？如何操作一个dom元素重新构建整个父元素？？

https://www.codecademy.com/articles/react-virtual-dom

Answer 1

假设您有一个按特定顺序排列的元素列表，该列表每秒更新一次(例如，商店中最后售出的商品的列表，按受欢迎程度排序)。在每次更新中，任何项目都可以在列表之外，并且新项目可以在随机位置进入。这使得很难通过移动、替换或插入元素来更新列表，所以最简单的方法是在任何更新时重新生成列表。

这种情况是最坏的情况，但一般来说，这种方法是最常见的，因为这是最简单的一种:忘记旧的列表，放入一个新的列表，即使没有任何更改。

React通过其“虚拟DOM"，能够获取新列表，将其与旧列表进行比较，并检测”真实DOM“中所需的更改并应用它们。这是基于这样一个事实，即它的虚拟DOM比真实DOM操作起来要快得多。