JSX 与虚拟 DOM

企业项目实战 > 第二部分 > React 基础回顾

JSX 与虚拟 DOM

什么是 JSX

JSX 即 JavaScript XML —— 一种在 React 组件内部构建标签的类似于 XML 的语法, 其格式比较像是模版语言, 但事实上完全是在 JavaScript 内部实现的。所以它也被称之为一个 JavaScript 的语法糖, JSX 主要应用于 React 架构中, 它能让我们在 JS 中编写 XML 标记语言。这样使用 JavaScript 来构建组件以及组件之间关系的应用, 在代码层面显得更清晰。

return <div>这就是一段JSX代码</div>;

JSX 的渲染流程

如同上面所说的, JSX 其实是一个对象, 它在被编译后, 就成为了一个函数调用, 其返回值为一个 JS 对象, 这个 JS 对象是一个抽象的 DOM 对象, 也就是我们常说的虚拟 DOM。这样说, 你们可能不是那么容易理解, 那么现在, 我们去 babel 看看 JSX 编译后的对象长啥样子的：

我们去 babel 看看编译后的 JSX

从上面的例子中, 我们可以看到, JSX 对象中使用了 React.createElement 这个方法, 那么, 我们再去官网看看官方是怎么解释这个方法的吧：

React.createElement 方法的官方解释

什么是虚拟 DOM

参考上面 JSX 渲染流程中提到的, 虚拟 DOM 是相对于浏览器所渲染出来的真实 DOM 的, 在 React, Vue 等技术出现之前, 我们想要改变页面展示的内容只能通过遍历查询 DOM 树的方式来找到需要修改的 DOM, 然后修改其样式行为或者结构, 以达到更新视觉图层的目的。

什么是 DOM

DOM 是文档对象模型, 是为了操作文档而出现的 API, 它将整个页面规划成由节点层级构成的文档, 用于描述处理网页内容的方法和接口。
在前端领域提到了 DOM 就不得不说到 JavaScript 的另一个对象模型：BOM, BOM 是浏览器对象模型, 是为了操作浏览器而出现的 API, 确切地说, BOM 是对浏览器本身进行操作, 而 DOM 是对浏览器内的内容进行操作。JavaScript 的实现就是使用 ECMAScript 脚本来操控这两个 API 实现对用户界面的修改。

为什么要使用虚拟 DOM

真实 DOM 操作其资源消耗相对来说是比较大的, 因为每次查询几乎都需要遍历整个 DOM 树, 如果建立一个与 DOM 对应的虚拟 DOM 对象, 以对象嵌套的方式来表示 DOM 树, 那么每次对 DOM 的修改就变成了对 JavaScript 对象的属性的修改, 这样一来就能通过查找/修改 JavaScript 对象的属性变化来操作整个 DOM 树和它其中的节点, 其消耗无疑是要小很多的。

为什么真实 DOM 操作的资源消耗大

真要说起来, 其实并不是查询 DOM 树性能开销大, 虽然说对每一个 DOM 节点的操作几乎都要遍历整棵 DOM 树, 但其根本原因还是因为 DOM 的实现模块和 JavaScript 模块是分开的, 因为我们都知道, JavaScript 是由 ECMAScript 加上 DOM 对象模型和 BOM 对象模型组合而来的。我们每一次对节点的操作都需要在两个甚至三个模块之间通讯来完成, 而正是这些跨模块的通讯消耗了较多的资源；
然后, 在我们每一次修改或添加新的 DOM 节点时都会重新生成整棵 DOM 树和 CSSOM 树(CSS 规则树), 然后合并 DOM 树与 CSSOM 树, 重新计算在页面如何绘制和渲染, 也就是我们常说的回流与重绘。这样就不可避免地造成了大量的 GPU 资源的消