React 入门教程系列（三）——JSX 和虚拟 DOM

古城微笑少年丶 2023-06-06 12:09 8阅读 0赞

### 文章目录 ###

*   *   *  1. JSX
         *  2. 虚拟 DOM
         *  3. 实例1
         *  4. 实例2
         *  5. 源码

### 1. JSX ###

`JSX`的全称是 `JacaScript XML`，是 React 定义的第一种类似于 XML 的 JS 拓展语法。

JSX 的语法大致遵循下面几条：

*  标签名任意
 *  标签属性任意
 *  遇到`<` 符号，以标签的语法进行解析
 *  遇到`{`符号，以 js 语法解析，js代码必须用 \{\} 包含

`JSX` 的作用是用来创建 react 虚拟 DOM 对象，例如下面的代码：

var vDom = <h1>Hello React!</h1>

值得注意的是，上面的代码不是字符串，也不是 HTML/XML 标签，也不是存粹的 JavaScript 代码，上面代码最终产生的就是一个 JS 对象。

上面的一段 code 会被 `babel`解释成如下代码：

var vDom = React.createElement('h1', { }, 'Hello React')

React 对象直接调用 `createElement` 函数，函数接受三个参数：

1.  第一个是要渲染的标签
2.  第二个传入标签相关属性，例如 `title、id`等等
3.  第三个参数则是传入标签中的文本。

### 2. 虚拟 DOM ###

在之前使用原生 JavaScript 或者 jQuery 操作 DOM 是一件非常麻烦的事情，DOM 标签和 JavaScript 代码混在一起，编写困难且不易阅读。另外，频繁的操作 DOM 也会带来性能上的问题。

`虚拟 DOM 的出现，很好的解决了上面的问题。`

虚拟 Dom 可以看作是使用 JavaScript 代码模拟 DOM 结构的树形结构，DOM 中的标签、内容对应着 JavaScript 代码中以 key-value 的对象，例如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

在 React 中创建虚拟 DOM 有两种方法：

*  第一种是使用纯 JavaScript 代码进行创建
 *  第二种方式是使用 JSX 的语法，**通过 babel 对这种语法进行解释成浏览器可识别的 JS 代码。**

具体使用可以查看下面两个实例。

### 3. 实例1 ###

下面我们就分别尝试使用 JSX 语法和纯 JavaScript 代码两种方式向页面输出内容。

首先来看看效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]

创建一个 html 文件，引入相关库文件，这里分别创建两个`<script>`标签，用两种方式输出。

直接上代码：

可以看到，上面使用了两个`<script>`标签，但两个标签的 `type` 属性不同。一个使用纯 JavaScript 代码创建虚拟 DOM， 另一个使用 JSX 语法创建虚拟 DOM。

通过比较，使用 JSX 语法其实更为直观。

### 4. 实例2 ###

看了上一个例子，相信对 JSX 语法有一定理解，下面继续使用 JSX 语法完成下面的界面。即一个 `<ul>`列表，其中嵌套着一些 item，`这里要求列表项需循环读取。`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]  
直接上代码：

这里需要注意的是，使用 map 循环虚拟 DOM 时，需要为元素加上 `key` 属性，否则会报如下警告⚠️：

![在这里插入图片描述][20191011195103918.png]  
**这是因为 React 中 element diff 算法，为了优化渲染性能的一种策略。**

### 5. 源码 ###

实例1：[https://github.com/Mayandev/react-tutorial/blob/master/code/react-jsx/react-jsx.html][https_github.com_Mayandev_react-tutorial_blob_master_code_react-jsx_react-jsx.html]  
实例2：[https://github.com/Mayandev/react-tutorial/blob/master/code/react-jsx/react-jsx-practice.html][https_github.com_Mayandev_react-tutorial_blob_master_code_react-jsx_react-jsx-practice.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20230601/2efbc0f4c0284d02b588183abb99a02c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20230601/701100cd32e64d21ac152afe52a33222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]: /images/20230601/404529f8581a46b29239380bbf9c90d1.png
[20191011195103918.png]: /images/20230601/82cc8f02cd744544ac616c66d6cc26a9.png
[https_github.com_Mayandev_react-tutorial_blob_master_code_react-jsx_react-jsx.html]: https://github.com/Mayandev/react-tutorial/blob/master/code/react-jsx/react-jsx.html
[https_github.com_Mayandev_react-tutorial_blob_master_code_react-jsx_react-jsx-practice.html]: https://github.com/Mayandev/react-tutorial/blob/master/code/react-jsx/react-jsx-practice.html