Question

我读了很多关于VirualDOM的文章。所有文章都解释了VirtualDOM如何计算变化，然后以有效的步骤更改真实的DOM。但是他们没有解释如何在realDOM中对元素进行反应？他们使用官方API？（＆＃39; document.createElement＆＃39;，appendChild等...）？

因此他们说RealDOM很慢，如果你在realDOM中改变某些东西，他会重新渲染整个DOM。

所以例如：

简单的HTML标记：

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

简单的脚本：

const li = document.createElement('li');
document.querySelector('.list').appendChild(li);

问题：

1）此操作将重新绘制整个DOM？

2）在这个简单的操作中，反应会更快吗？

3）反应后计算VirtualDOM与RealDOM如何在realDOM上做出反应？反应使用浏览器API？或者他们有其他方式？

感谢所有人！：）

Answer 1

虚拟DOM（VueJs，ReactJs和其他）只是DOM的抽象级别。这意味着，Virtual DOM中的基本操作总是比DOM慢。但Virtual DOM和组件方法有助于在大型SPA应用程序中有效地管理DOM树。基本上，Virtual DOM允许您最小化重新布局的需要并重新绘制DOM树。

回答你的问题：
1）没有 2）无论如何 3）是的，ReactJs使用DOM，例如，这里是源代码：
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberComponent.js#L379
和
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/setInnerHTML.js#L38

虚拟DOM和Real DOM步骤可实现简单操作

1 个答案: