时间戳

首页 > 解决方案 > 我对使用 React JS 和 Virtual DOM 处理重新渲染感到困惑

javascript - 我对使用 React JS 和 Virtual DOM 处理重新渲染感到困惑

问题描述

我正在使用 React JS，但我需要了解更多关于 Virtual DOM 及其好处的信息。

显然，在 Real DOM 中，对于 UL 的每次更改，父级和子级都应该重新渲染......

例如考虑以下代码：

<ul>
   <li>List item</li>
   <li>List item</li>
   <li>List item</li>
</ul>

为了向这个 UL 列表中添加一个项目，在使用ul.appendChild(li)所有重新渲染到 Browser 的 UL 之后，将一个新的 Li 项目添加到这个列表中。这需要时间并且有性能问题。因为在 Web 中，我们不仅有一个 UL，而且可能有很多元素，并且该 UL 列表可能非常复杂。

但是对于虚拟 DOM，React 会截取我们的 DOM，并且对于 JSX 中的每个更改都有一个比较并找到将新 Li 添加到 UL 列表中的最佳方法。

例如对于上面的 UL 列表，要在 latest 之后添加新项目可以使用这个：

latestLi.parentNode.insertBefore(newElement, element);

上面的代码意味着，React 想要在最新元​​素之后或之前添加新项目，并且所有 UL 和孩子永远不会重新渲染到浏览器中......

取而代之的是：

ul.appendChild(li);

所以在这个解释之后，我对虚拟 DOM 是否理解正确，或者我需要研究这个概念是不正确的，我有误解和错误？！

谢谢

标签： javascriptreactjsdomvirtual-dom

解决方案

“React 对我们的 DOM 进行截图”——不是截图，而是快照。也就是说，它需要一份 DOM 的副本。当您通过渲染组件对虚拟 DOM 进行更改时，React 会执行 diff 操作并且仅重新渲染更改的 DOM 部分。这是高度优化和高效的。

请注意，实际上，您无需了解 Virtual DOM 的工作原理即可编写 React 代码。只需了解它有自己的 DOM，这就是为什么您需要做一些与纯 JavaScript 略有不同的事情，例如使用 'refs' 来处理 React DOM 无法处理的某些类型的更新。

推荐阅读