我正在使用React JS，但我需要了解有关虚拟DOM及其优势的更多信息。
显然在Real DOM中，对于UL的每次更改，父母和孩子都应该重新渲染...
例如，考虑以下代码：
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
要向此UL列表中添加项目，请使用ul.appendChild(li)将所有UL重新渲染到浏览器后，再向该列表中添加新的Li项目。这需要时间并且存在性能问题。因为在网络中，我们不仅有一个UL，而且可能包含很多元素，并且该UL列表可能非常复杂。
但是对于虚拟DOM，React截取了我们的DOM的屏幕快照，并且对JSX的每次更改都进行了比较，并找到了将新Li添加到UL列表中的最佳方法。
例如，对于上面的UL列表，要在最新的之后添加新项，可以使用此：
latestLi.parentNode.insertBefore(newElement, element);
上面的代码意味着，React希望在最新元素之后或之前添加新项目，并且所有UL和child都不会重新呈现到浏览器中...
相反：
ul.appendChild(li);
因此，在解释了这一点之后，我是否对虚拟DOM理解正确，或者我需要研究，但是这个概念不正确，我有误会和错误吗？！
谢谢
答案 0 :(得分：0)
“ React拍摄我们DOM的屏幕快照”-而不是屏幕快照，即快照。也就是说，它需要DOM的副本。通过渲染组件对虚拟DOM进行更改时，React会执行diff操作，并且仅重新呈现DOM更改的部分。这是高度优化和高效的。
请注意，实际上，您不需要太多了解虚拟DOM如何工作即可编写React代码。只需了解它具有自己的DOM，这就是为什么您需要做一些与纯JavaScript稍有不同的事情的原因，例如，对React DOM无法处理的某些类型的更新使用“ refs”。
答案 1 :(得分：0)
随时间推移跟踪变化可能很复杂，并且根据操作顺序，您可能会遇到一些奇怪的情况。基本上将所有内容丢弃并重新构建整个页面，就像每次更改后一样简单。
但是对于真正的DOM来说，这是非常昂贵的。
这就是虚拟DOM发挥作用的地方。从头开始更改后构建Page的外观表示便宜得多，而没有真正DOM的全部开销。现在，React将这种表示形式与内部状态进行比较，并处理到达此状态所必需的对真实DOM的突变。