反应虚拟DOM

其核心优势之一是支持创建虚拟DOM以提高页面性能。那么，什么是虚拟DOM？事实上，虚拟DOM的概念已经提出了很长时间，这是相对于实际DOM的。

当设计者设计传统HTML页面的UI时，他们将在页面中定义许多DOM元素。这些DOM元素就是所谓的实际DOM。通常，页面中的实际DOM负责承载外观和数据更改。任何外观更改或数据信息更新都应反馈给UI，UI需要通过操作实际的DOM来实现。

因此，问题自然就出现了。对于复杂的页面UI，将定义大量实际的DOM。大量实际DOM的频繁操作通常会导致访问性能和用户体验的严重下降，这是设计者不希望看到的。因此，React框架专门针对这种现象引入了虚拟DOM机制，以避免频繁的DOM操作导致的性能下降。

React DOM类似于相关实际DOM的集合。它是React的虚拟DOM对象，是一个内置对象。将其理解为DOM组件应该更合适。因此，React框架将ReactDOM称为虚拟DOM。

示例代码：传统（实际）DOM

 书信电报；div id=“app”>；<；/分区>

 书信电报；脚本>

 nbsp； ；//获取页面中的div

 nbsp； ；let div=document.getElementById（“app”）；

 nbsp； ；//创建span标记

 nbsp； ；let span=document.createElement（“span”）；

 nbsp； ；//创建h3标签

 nbsp； ；让h3=document.createElement（“h3”）；

 nbsp； ；h3.innerHTML=“橘猫不能吃脂肪”；

 nbsp； ；//创建p标记

 nbsp； ；let p=document.createElement（“p”）；

 nbsp； ；p、 innerHTML=“新年快乐；；

 nbsp； ；//将h3和p添加到span

 nbsp； ；span.appendChild（h3）；

 nbsp； ；span.appendChild（p）；

 nbsp； ；//将span添加到div

 nbsp； ；div.appendChild（span）；

 lt；/脚本>

示例代码：虚拟DOM

 书信电报；div id=“react div”>；<；/分区>

 书信电报；script type=“text/babel”>；

 nbsp； ；let reactDiv=document.getElementById（“react div”）；

 nbsp； ；//创建虚拟DOM元素

 nbsp； ；//React.createElement中的三个参数表示元素名称、空对象和对象中的内容

 nbsp； ；常量反应H3=反应。CreateElement（“h3”，{}，“橘猫不能吃脂肪”）；

 nbsp； ；const reactP=反应。CreateElement（“p”，{}，“新年快乐”）；

 nbsp； ；const reactSpan=反应。createElement（“span”，{}，reactH3，reactP）；

 nbsp； ；//将跨度渲染到div

 nbsp； ；反应DOM。渲染（reactSpan、reactDiv）；

 lt；/脚本>