【深入理解React】05_理解虚拟DOM

前言

说到虚拟DOM提高了性能的时候，我们总是会这么解释：DOM操作是很慢的，但是JS却可以很快，直接操作DOM可能会导致频繁的回流和重绘，JS不存在这些问题，所以虚拟DOM比原生DOM更快。但这并不完全正确。

什么是虚拟DOM

虚拟DOM本质上是JS和DOM之间的一个映射缓存，是一个能够描述DOM结构和属性的JS对象。

在react中，挂载阶段的JSX经过babel转义为了React.createElement()，该方法中调用了ReactElement返回了一个虚拟DOM对象，该对象通过ReactDOM.render实现了虚拟DOM到真实DOM的映射。更新阶段页面的变化会先作用于虚拟DOM，虚拟DOM将在JS层借助算法先对比具体有哪些真实DOM需要被改变，然后将这些改变作用于真实DOM。

虚拟DOM的缺点

在以前不管是用户直接操作真实的DOM,还是使用模板引擎渲染页面，本质上都是动态生成HTML字符串（构建新的真实DOM），然后直接将旧的DOM元素整体替换。

而虚拟DOM，则是先构建新的虚拟DOM，通过diff算法比对出新旧两棵树的差异，差量更新DOM。

虚拟DOM比前者多出了比较这一个环节，当数据内容变化非常大，或者说整个发生了变化，促使差量更新计算出来的结果和全量更新极为接近或者说完全一样时，虚拟DOM的劣势就出来了。虚拟DOM的劣势主要在于JS计算的耗时，DOM操作的耗时和JS计算的耗时根本不在一个量级上。

所以虚拟DOM的优点不是在它提高了性能上。

虚拟DOM的优点

虚拟DOM的优点有两个：一个是提高了研发体验/研发效率，一个是解决了跨平台的问题。

早起前端开发页面从直接编写原生DOM -> 使用JQ操作DOM -> 使用模板引擎渲染页面 -> 使用虚拟DOM渲染页面，都使得我们的开发效率越来越高效。即虚拟DOM是前端开发们为了追求更好的研发产物和研发效率而创造出来的高阶产物。

借助虚拟DOM，我们可以在不同的平台将虚拟DOM转为对应的代码，进而实现了多端开发。

总结

• 虚拟DOM的劣势在于JS计算的耗时，所以虚拟DOM不是为了性能优化而开发出来的；
• 虚拟DOM的出现是前端开发者们为了提高开发效率而出现的，它的存在也将一套代码多端编译，实现跨平台变成了可能。

---

如有错误，欢迎指出，感谢~