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
总结:
-
真正的 DOM 对象属性很多,处理起来不方便
-
性能角度
-
真正价值:跨平台
虚拟dom --- reactDom --> web Dom
虚拟dom --- react-native --> APP
虚拟dom --- react-360 --> VR