React精讲（三）jsx本质源码分析

前两讲讲到了react的书写方法，也讲到必须引入babel且在script标签上加上一个type="text/babel"的属性，jsx才能被执行。那么这一讲，我们将深入到jsx的本质，具体了解jsx的来龙去脉。

jsx本质

定义分析

实际上, jsx仅仅只是React.createElement(component, props, …children) 函数的语法糖。

语法糖：“生活有了糖会更甜，没有还是照样过”，上面这句话很形象地讲到了语法糖的作用，它是将一个较为复杂的代码封装成一个供开发者简单使用的形式，在代码真正执行时，执行的并不是语法糖，而是将其解析成原来复杂的形式来执行。

那么jsx的原本的复杂形式是什么呢？

所有的jsx最终都会被转换成React. createElement的函数调用

①. jsx形式

<script type="text/babel">
const msg = <h2>hello react</h2>
ReactDOM.render(msg, document.getElementById("app"))
// app为某个div的class名
</script>

②. createElement形式

<script type="text/babel">
const msg = React.createElement("h2", null, "hello react");
ReactDOM.render(msg, document.getElementById("app"))
</script>

两者live-server的结果是相同的，且源码形式不用加type=“text/babel”
 

源码分析

下面我们通过react源码来了解一下createElement：

查看源码的步骤：进入GitHub -》搜索react 点击进入 -》在Branches中选定一个你想要了解的版本 点击进入 -》 点击进入packages文件夹 -》 该文件夹中放置的就是源码。
 
在本例中，我们想了解react，所以进入react文件夹，该文件夹中的index.js为入口文件(可以在入口文件中找我们想要的东西)，本例中入口文件指引我们进入React.js文件中，于是点击进入src文件夹的react.js文件，在其中发现了createElement，但还没有它的源码，根据指引在ReactElement.js找到了createElement函数的源码

在源码中我们了解到：

createElement函数需要传递3三个参数:（上面的比较案例中我们已经使用了React.createElement函数了）
参数一: type