Real DOM(真实的DOM)

在页面渲染出的每个节点都是一个真实的DOM结构

<div class="root">
  <h1>hello Real </h1>
</div>

这个就是真实的dom

真实dom的优缺点？

优点：

1. 直接操作HTML，易用

缺点：

1. 解析速度慢，效率低，内存占用量高

2. 性能差：频繁操作真实DOM，导致重绘、回流

Virtual DOM(虚拟的DOM)

虚拟dom的优缺点？

<h1 className="hClass">hello world</h1>

这是虚拟dom的写法

JSX实际是一种语法糖，在使用过程中会被babel进行编译，转化成JS代码，上面的虚拟DOM转换如下：

const vDom = React.createElement('h1',{
    {className:'hClass'},
     'hello world'
)

他一共有三个参数

第一个参数是 标签名，例如h1、div等；

第二个参数是对象，里面存放着标签的一些属性，如class、id等；

第三个参数是节点中的文本

优点：

1. 减少真实dom的频繁更新，减少重绘回流、占用内存少

2. 跨平台：一套react代码可以多端运行

缺点：

1. 页面首次渲染时，由于多一层虚拟dom的计算，速度比正常慢些

两者的区别

1.虚拟dom不会进行重绘和回流，而真实dom会频繁重排与重绘

2.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“；真实dom的消耗是”真实dom全部增删改+重排“