JSX 到 JS 的转换

在写react代码的时候，大部分同学应该都是写JSX。因为相比于写纯JavaScript。写JSX为我们去写组件，比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的，他的可阅读性，可维护性都要高很多的。那么JSX他的魔力在哪里，能够让我们在JS里面写html代码。

 

JSX相对于JavaScript来讲，他的唯一的一个区别就是他可以写类似于html的标签。

 

https://www.babeljs.cn/repl 在这个网址写示例

 

左边

<div></div>

右边

"use strict";
React.createElement("div", null);

在左边我们声明了html的标签，他在右边会返回一个我们在react当中我们需要返回的一个对象。这就是 JSX 到 JS 的一个转换过程

我们会发现通过这种标签写的，他最终都会转换成 React.createElement 。里面的标签名，属性，内容都会通过参数给他。

 

左边

<div id='div' key='key'>test</div>

右边

React.createElement("div", {
  id: "div",
  key: "key"
}, "test");

会把所有的属性放在第二个参数，第二个参数是个对象，都会加在这个对象里面给他。第三个参数在 React 中称为 children ，也就是标签内容

 

如果标签里面也有标签

左边

<div id='div' key='key'>
  <span>spanTest</span>
</div>

右边

React.createElement("div", {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"));

因为span他也是标签，所有第三个参数传内容的地方，再次将标签转换成 React.createElement 。

 

再复制一个节点

左边

<div id='div' key='key'>
  <span>spanTest</span>
  <span>spanTest</span>
</div>

右边

React.createElement("div", {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"), 
React.createElement("span", null, "spanTest"));

会发现第三个以后都是节点，多少个节点，后面就多少个 React.createElement 。这就是 JSX 转换成 JS 的样子。在这里我们看到第一个参数是个字符串。那么如果这个不是个标签，是个组件，他会怎么样呢？

 

左边

function Comp() {
    return <a>123</a>
}

<Comp id='div' key='key'>
  <span>spanTest</span>
  <span>spanTest</span>
</Comp>

右边

function Comp() {
  return React.createElement("a", null, "123");
}

React.createElement(Comp, {
  id: "div",
  key: "key"
}, React.createElement("span", null, "spanTest"), React.createElement("span", null, "spanTest"));

这个时候发现就不再是字符串，而是以变量的方式传递进来。值得注意的是。在目前的babel插件里面，在转化的过程当中，会根据大小写判断。小写认为是原生的html标签，就是以字符串的形式传递，如果是大写，就认为是组件，当做变量传递

 

React.createElement 我们就从来不会写到，但是我们用到的是最多的