我读了很多关于VirualDOM的文章。
所有文章都解释了VirtualDOM如何计算更改,然后以有效的步骤更改实际DOM。
但是他们没有解释在realDOM中如何反应绘制元素?他们使用官方API? (“ document.createElement”,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 vs RealDOM如何反应对realDOM的绘制?反应使用浏览器API?还是他们有其他方法?

谢谢大家! :)

最佳答案

虚拟DOM(VueJ,ReactJ和其他)只是DOM的抽象级别。这意味着,虚拟DOM中的基本操作始终比DOM慢。但是虚拟DOM和组件方法有助于在大型SPA应用程序中有效地管理DOM树。
基本上,虚拟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

09-17 18:28