跳到主要内容

认识

2024年03月06日
柏拉文
越努力，越幸运

一、认识​

真实 DOM, 为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构。 Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应。在 React 中，JSX 是其一大特性，可以让你在 JS 中通过使用 XML 的方式去直接声明界面的 DOM 结构, JSX 实际是一种语法糖，在使用过程中会被 babel 进行编译转化成 JS 代码，最终会编译成 React Element 对象。对比真实 DOM, 虚拟 DOM 的优势:

  1. 操作虚拟 DOM不会进行排版与重绘操作，而操作真实 DOM 会频繁重排与重绘

  2. 虚拟 DOM的总损耗是虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘, 真实 DOM的总损耗是真实 DOM 完全增删改+排版与重绘

因此, 虚拟DOM 的优势在于可以通过 JavaScript 寻找出更新前后的最小差异, 进行增量更新。