《React+Redux前端开发实战》—1.3.2 虚拟DOM

1.3.2  虚拟DOM

　　先来了解一下什么是DOM，什么又是虚拟DOM。

　　Document Object Model（DOM，文档对象模型）是W3C（World Wide Web Consortium，万维网联盟）的标准，定义了访问HTML和XML文档的标准方法：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说，就是用于连接document和JavaScript的桥梁。

　　每个页面都有一个DOM树，用于对页面的表达。真实场景中用户的很多操作会导致浏览器的重排（引起DOM树重新计算的行为）。一般的写法都是手动操作DOM，获取页面真实的DOM节点，然后修改数据。在复杂场景或需要频繁操作DOM的应用中，这样的写法非常消耗性能。当然也有许多方式可以避免页面重排，比如把某部分节点position设置为absolute/fixed定位，让其脱离文档流；或者在内存中处理DOM节点，完成之后推进文档等。这些方法维护成本昂贵，代码难以维护。

　　React为了摆脱操作真实DOM的噩梦，开创性地把DOM树转换为JavaScript对象树，这就是虚拟DOM（Virtual DOM）。

　　简单理解，虚拟DOM就是利用JS去构建真实DOM树，用于在浏览器中展示。每当有数据更新时，将重新计算整个虚拟DOM树，并和旧DOM树进行一次对比。对发生变化的部分进行最小程度的更新，从而避免了大范围的页面重排导致的性能问题。虚拟DOM树是内存中的数据，所以本身操作性能高很多。

　　可以说，React赢就赢在了利用虚拟DOM超高性能地渲染页面，另辟蹊径地处理了这个对于开发者来说真实存在的痛点。除此之外，由于操作的对象是虚拟DOM，与真实浏览器无关，与是否是浏览器环境都没有关系。只需要存在能将虚拟DOM转换为真实DOM的转换器，就能将其转为真实DOM在界面中展现，从而就达到了利用React实现跨平台的目的，比如React Native的实现。