React 的 JSX 语法

React.createElement()

JSX 即 JS 的拓展，拓展了 JS 的语法，使得可以写 HTML 标签而不报错

或许这时你想到了世界上最好的语言，两者表面上确实也很相似，只不过用 PHP 写模板时，HTML 是主体，用 JSX 时，JS 才是主体

理解 JSX 最简单也是最好的方法就是去多看一下编译结果：https://www.babeljs.cn/repl

在 JS 文件中写的标签都会被编译成 React.createElement() 的函数调用

<div role="button"></div>

会被编译成

React.createElement("div", {
  role: "button"
});

可以看到，第一个参数是标签名，第二个参数是一个指定 attribute 的对象

复杂一点的

<div className="card">
  <input type="text" />  <!-- 不同于HTML5, JSX 必须加 / 结束标签 -->
  <button>submit</button>
</div>

编译结果为

React.createElement(
  "div",
  { className: "card" },
  React.createElement("input", { type: "text" }),
  React.createElement("button", null, "submit")
);

第三个参数及其之后的参数就是元素的内容了，这里 div 里面是 input 和 button 所以第三个参数和第四个参数是嵌套的 React.createElement() 调用

React 组件

<Welcome name="nada" />

会被编译成

React.createElement(Welcome, { name: "nada" });

通过 JSX 的编译结果，我们知道了为什么组件名必须大写字母开头

组件名如果不规定大写字母开头，就无法辨别是组件还是原生 DOM 元素

规定了之后，就可以很轻松的辨别出，并编译成 React.createElement() 调用

组件的话第一个参数就传入相应的类，原生 DOM 元素就传入相应字符串

React 元素

React.createElement() 会预先执行一些检查，然后返回一个 JS 对象，下面代码是简化后的，实际要更复杂

{
  type: 'div',
  props: {
    className: 'card',
    children: [
      {
        type: 'input',
        props: {
          type: 'text'
        }
      },
      {
        type: 'button',
        props: {
          chilren: 'submit'
        }
      }
    ]
  }
}

这些对象被称为 React 元素，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象，React DOM 会负责更新 DOM 来与 React 元素保持一致

JSX 中标签是嵌套的，编译成的 React.createElement() 也是嵌套的，那返回的对象自然也是嵌套的

React DOM 就是使用这样的嵌套对象来构建用户界面