React 入门教程系列（三）——JSX的理解与使用

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. 实例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 语法其实更为直观。

3. 实例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 算法，为了优化渲染性能的一种策略。

4. 源码

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