我对用React JS和虚拟DOM重新渲染句柄感到困惑

Question

我正在使用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理解正确，还是需要研究，但是这个概念不正确，我误会和错误了！！

谢谢

Answer 1

“ React拍摄我们DOM的屏幕快照”-而不是屏幕快照，即快照。也就是说，它需要DOM的副本。通过渲染组件对虚拟DOM进行更改时，React会执行diff操作，并且仅重新呈现DOM更改的部分。这是高度优化和高效的。

注意，实际上，您不需要太多了解虚拟DOM如何工作来编写React代码。只需了解它有自己的DOM，这就是为什么您需要做一些与纯JavaScript稍有不同的事情的原因，例如，对React DOM无法处理的某些类型的更新使用“ refs”。