持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

JSX

JSX是什么

JSX即JavaScriptXML，它是JavaScript的一种扩展语法，拥有JavaScript的能力且形式上更加类似HTML语法，它与模板语法this is ${template}也很接近，即都可以直接使用变量。
一段JSX语法代码如下：

const items = [
  {key: '1', value: 'test1'},
  {key: '2', value: 'test2'}
]
<div key={index}>
   {items.map((v, idx) => (
          <div key={`${index}_${idx}`}>
              <span className="alarm-items">
                 {v.key}--{v.value}
              </span>
          </div>
   ))}
</div>

JSX如何在JavaScript中生效

从上一小节可知JSX是JavaScript的一种语法扩展，所以正是由于扩展这个特性，直接决定了浏览器并不会像天然支持JavaScript一样地支持JSX，那么JSX是如何在JSX生效的呢，这就必须使用Babel。
Babel，官网对它的解释是“一个JavaScript编译器”，其实就是前端常用的一种工具库，它主要的功能就是将ES6及其以上版本的代码转换为ES5等浏览器可以识别的语法，以便ES6+代码能够运行在浏览器或其他环境中。
如下一段react的JSX代码：

      <div id="wrapper">
        <div className="inner">
          <ul style={{ minHeight: "1rem" }}>
            {tasks.map((task, taskIndex) => (
              <li
                key={task.id}>
                <span>
                  {task}
                </span>
                <span>hello</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

经过Babel编译之后为：

"use strict";

/*#__PURE__*/React.createElement("div", {
  id: "wrapper"
}, /*#__PURE__*/React.createElement("div", {
  className: "inner"
}, /*#__PURE__*/React.createElement("ul", {
  style: {
    minHeight: "1rem"
  }
}, tasks.map((task, taskIndex) => /*#__PURE__*/React.createElement("li", {
  key: task.id
}, /*#__PURE__*/React.createElement("span", null, task), /*#__PURE__*/React.createElement("span", null, "hello"))))));

可以看出，JSX会被多次调用React.createElement()方法创建元素对象得到编译结果，而React.createElement()方法接收三个参数，分别为type（元素类型）、[prop]（元素属性，比如类名 className、id等）、[...children]子元素，比如id为wrapper的父元素包含className为inner的div子元素。React.createElement()方法最终返回一个叫作"React Element"的JS对象。

React与JSX语法

React中使用JSX语法最终会被转换为使用React.createElement来创建元素，而JSX语法有哪些优势呢？一是当项目代码很复杂的时候，JSX代码的结构也很清晰，它很类似我们所熟悉的HTML标签语法，即类HTML标签语法，通过类HTML标签语法从而创建虚拟DOM，对应初学者也更加容易，能够降低学习成本。 JSX不仅支持React、也支持Vue等前端流行的框架，而且在React等框架中使用JSX语法更加容易描述UI界面。