虚拟dom和jsx

大家好，我是万维读客的讲师曹欢欢。本节主要学习虚拟DOM基础知识和react中最常用的JSX文件编译原理知识。

DOM

我们写的HTML代码，在浏览器解析后会形成DOM树，打开浏览器控制台就能看到：

我们看到的就是浏览器真是的DOM树结构，从树根一层层展开到每个叶子DOM节点，这是真实的DOM，用document.body可以获取到body的DOM节点。

比如我们执行下面的JavaScript代码：

const container  = document.createElement('div');
const head = document.createElement('head');
container.appendChild(head);

上面的container就是在内存中创建的一个DOM节点，结构如下：

<div>
  <head></head>
</div>

这种在内存中的DOM节点就被称为虚拟DOM节点。

JSX 是一种 JavaScript 的语法扩展，它允许我们在 JavaScript 代码中直接书写类似于 HTML 的标记语言，从而使得编写 React 组件更加方便和直观。

通过JSX插件编译的时候会把下面的代码编译成函数形式：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

编译后

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

编译过程实际上就是通过词法和语法分析解析jsx中的html片段，把DOM节点解析成下面这种数据结构：

type: 类型，对应DOM节点的标签
property: 属性，对应DOM节点的属性
children: 子元素，对应DOM节点内部的子元素

上面这些都是通过jsx的编译插件处理的，我们无需关心，我们只要了解这个原理即可。

上面React.createElement这个函数实际上做的事情也是维护这样一份数据结构，他返回的数据类型如下所示：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

请遵守《互联网环境法规》文明发言，欢迎讨论问题