虚拟dom和jsx

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

DOM

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

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

虚拟DOM

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

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

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

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

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

jsx文件

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!'
  }
};

参考学习

  1. https://zh-hans.legacy.reactjs.org/docs/introducing-jsx.html
  2. https://cn.vuejs.org/guide/extras/render-function.html


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部