什么是虚拟DOM
Web前端开发人员在设计传统HTML网页UI时,都会在页面中定义树形结构的DOM元素。这些DOM负责呈现页面中的数据内容和外观样式,任何数据内容或外观样式的改变,均会更新到UI上。
对传统HTML页面而言,这些DOM就是真正意义上的实际DOM元素。React框架通过一种被称为虚拟DOM的元素来实现HTML页面。所谓虚拟DOM,是指一种将实际DOM组合在一起,构成一个DOM组件的技术。
React框架之所以采用虚拟DOM技术,主要目的就是提高页面的响应能力,避免传统HTML网页频繁操作DOM带来的性能下降的问题。复杂的 UI 一般会定义大量的实际DOM元素,当访问吞吐量偏大时,响应速度必然下降。React框架针对该问题进行了优化,特有的虚拟DOM技术就是解决问题的关键支撑技术之一。
在HTML DOM对象和ReactDOM对象中,均定义了一个方法createElement(),用来创建元素。HTML语法中的方法createElement()创建的是一个实际DOM,而React语法中的方法createElement()创建的则是一个虚拟DOM。