react读源码系列之JSX到javaScript

[wangzhenggui]

定义

熟悉react的同学可能对JSX这种写作格式已经不陌生了，JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。

从代码角度分析

const comp = <div id="id" data="123">
  <h1>H1</h1>
  <h2>H2</h2>
</div>

上面的代码是我们在 react项目中经常会书写的一种方式，那么我们有没有想过为什么react当中可以支持这种写法？这种方式的代码最后又会转换成什么样的格式呢？
下面我们看一下babel转换之后的格式

"use strict";

React.createElement(
  "div",
  { id: "id", data: "123" },
  React.createElement(
    "h1",
    null,
    "H1"
  ),
  React.createElement(
    "h2",
    null,
    "H2"
  )
);

上面编译之后的代码，我们会发现react当中这种JSX格式的代码最终都会通过React.createElement这个方法生成一个一个的“产物”，这里我们先命名为“产物”，后面章节我们再来阐述这生成的产物到底是什么。
我们来看下createElement这个API的参数吧！！！
第一个参数我们可以看到一个字符串 "div" 这不就是我们的html中的标签吗！
在来看下第二个参数，{ id: "id", data: "123" }一个属性对象，这个就是我们刚刚定义在div上面的属性
第3个参数，又是一个React.createElement生成的“产物”，我们发现里面的内容就是<h1>H1</h1>这个代码片
.......
从上面的分析，我们可以看到JSX编译成javaScript中， React.createElement的第三个参数之后，都是他的子标签， React.createElement会把第三个参数之后的参数变成一个数组作为它的Children处理。

在来看一下下面的代码块

function Comp() {
 return <div id="id" data="123">
  <h1>H1</h1>
  <h2>H2</h2>
</div>
}

<Comp> 
  <div>789</div>
</Comp>

第一个例子，我们转换的是html标签，我们在看下组件又是怎么转换的呢？

"use strict";

function Comp() {
  return React.createElement(
    "div",
    { id: "id", data: "123" },
    React.createElement(
      "h1",
      null,
      "H1"
    ),
    React.createElement(
      "h2",
      null,
      "H2"
    )
  );
}

React.createElement(
  Comp,
  null,
  React.createElement(
    "div",
    null,
    "789"
  )
);

这个地方，我们发现第一个参数变成来Comp这个变量了，如果我们把上面的**组件的名称换成小写的再看看编译结果，我们会发现，这个地方就会变成“comp”**字符串了，所以React中我们写组件的时候一定要首字母大写