虚拟DOM（react）

Virtual DOM：

虚拟 DOM 对象：就是一个普通的 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容

<div class="tab">123</div>
// { type: 'div', props: { className: 'tab', chilren: '123' } }

那真实DOM呢？ Real DOM，是一个文档对象模型也是一个 JS 对象，是浏览器默认提供的，DOM 对象 和 HTML 元素之间是一一对应的关系，虚拟dom属性少，原生dom属性多

那为啥要用虚拟DOM呢？

如果直接使用真实DOM

状态1 + jsx   ====> 真实DOM1

状态2 + jsx   ====> 真实DOM2

第一次生成时，速度很快

第二次生成时，直接替换？

引入虚拟dom

状态1 + jsx   ====>   虚拟dom1    ====>   真实DOM1

状态2 + jsx   ====>   虚拟dom2    == 对比虚拟dom1和2找不同 ==> 部分更新真实DOM1,得到真实dom2

总结：

1. 真正的 DOM 对象属性很多，处理起来不方便

2. 性能角度

3. 真正价值：跨平台

虚拟dom   --- reactDom     -->  web Dom
虚拟dom   --- react-native -->  APP
虚拟dom   --- react-360    -->  VR