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

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 的对象，例如下图：

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

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

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

3. 实例1

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

首先来看看效果：

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

直接上代码：

  <script type="text/javascript">
    const jsx = 'With JSX';
    const js = 'With JS';
    const elementId = 'element';
	// 纯 JavaScript 代码
    // 1.创建虚拟DOM
    const vDom1 = React.createElement('h2', {id: elementId.toLowerCase()}, js.toUpperCase())
    // 2.渲染虚拟DOM
    ReactDOM.render(vDom1, document.getElementById('test1'));
  </script>

  <script type="text/babel">
    // 使用JSX语法来写
    // 1.创建虚拟DOM
    const vDom2 = <h2 id={elementId.toUpperCase()}>{jsx.toLowerCase()}</h2>
    // 2.渲染虚拟DOM
    ReactDOM.render(vDom2, document.getElementById('test2'));
  </script>

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

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

4. 实例2

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

直接上代码：

  <script type="text/babel">
    // 功能：动态显示列表数据
    const names = ['jack', 'pony', 'tom', 'bill'];

    // 关键：如何将一个数组的数据转换为一个标签的数组
    // 1. 创建虚拟 DOM
    const ul = (
      <ul>
        {
          names.map((name, index) => 
            // 这里需要加上 key，否则会有警告
            <li key={index}>{name}</li>
          )
        }
      </ul>
    );
    // 2. 渲染虚拟 DOM
    ReactDOM.render(ul, document.getElementById('list1'))
  </script>

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

这是因为 React 中 element diff 算法，为了优化渲染性能的一种策略。

5. 源码

实例1：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