虚拟DOM与真实DOM详解

1、为什么需要虚拟DOM？

DOM就是HTML标签节点树，体积庞大。

在渲染视图时会调用render函数，组件创建时与视图依赖的数据更新时均会调用render函数渲染。

若采用真实DOM，创建更新插入操作需要巨大的性能消耗，反而会导致渲染效率较低。

因此采用虚拟DOM。由React控制存在内存中。

2、虚拟DOM怎么转换为真实DOM？

在组件首次被渲染时，先生成虚拟DOM，再根据虚拟DOM树创建真实DOM树，根据真实DOM挂载到页面中正确的位置。此时，每一个虚拟DOM对应一个真实DOM。

在组件受到响应式数据变化时，需要重新渲染了。先是调用render函数创建出一个新的虚拟DOM树，将新旧虚拟DOM树对比，找到最小更新量然后更新虚拟DOM节点。最后根据更新过的虚拟DOM节点，去修改对应的真实DOM节点。

从而准确实现局部的页面渲染。

3、类型

真实DOM就是一个标签a 、p、div啥的一个具体的节点

虚拟DOM是object对象