前言
相信很多初学者和我一样，刚开始用React的时候突然蹦出了个JSX这么个东西，一时间很懵逼。一段时间以后，只知道写React的时候一定要用JSX写，至于为什么还很不清楚。所以这一次笔者试着用自己的语言来理解一下JSX。😁😁
初见JSX
还记得当初刚接触JSX的情景吗？
当时是不是突然看到这样一个东西
const element = <h1> hello </h1>
心里：这是什么？是html吗？还是JavaScript？
其实，这就是ReactJS的语法格式，他既不是JavaScript也不是html，或者说他既是JavaScript也是html，这就是ReactJS自创的语言叫做JSX
⭐⭐
JSX是什么
先回到一个简单的问题上，JSX 是哪几个单词的缩写？
🤔🤔
是的，JavaScript XML，即在 JS 语言里加入类 XML 的语法扩展。这样我们就可以把 JSX 一分为二：
- 先介绍 X 的部分，即标签的命名规则，支持的元素类型、子元素类型；
- 然后是 JS 的部分，即 JSX 中都有哪里可以加入 JS 表达式。
按照React 官方的解释：JSX 是一个 JavaScript 的语法扩展，它看起来像是一种模板语言，但它具有 JavaScript 的全部功能
那么竟然说JSX是JS的扩展，那么它到底扩展了什么呢？
JSX的作用
一个最重要的扩展功能就是自定义组件
而组件又是React开发的基本单位。
在组件中，需要被渲染的内容是用React.createElement(component, props, ...children) 声明的，而 JSX 正是React.createElement函数的语法糖,JSX 会被编译为 React.createElement()，但浏览器本身不支持 JSX，所以在应用发布上线前，JSX 源码需要工具编译成由若干createElement函数组成的 JS 代码，然后才能在浏览器中正常执行。JSX 需要被编译，而编译这个动作就是由 Babel 来完成的。
来看个例子：
// 部分jsx
<header className="App-header">
<h1>哈喽</h1>
</header>
经Babel编译成 JS 就会变成：
React.createElement("header", {className: "App-header"},
React.createElement("h1", null, "哈喽")
);
所以在开发组件时
你也可以选择不用 JSX，而是自己手写这些 JS 代码。
这样做最显著的好处就是，这部分代码不需要针对 JSX 做编译，直接可以作用于浏览器。
但当元素或者元素的嵌套层级比较多时，JS 代码的右括号会越来越多。 当你看到成篇的 )))))))); 时，你的代码和内心会有一个先崩溃。就算 IDE 帮忙自动格式化，对应层级缩进，也没法减少括号嵌套的数量。
JSX使用常见的坑
这里说一个最容易犯的错。
当App 代码 return 语句返回 JSX 时，将 JSX 包在了一对括号 ( ) 里，这是为了避免踏入 JS 自动加分号的陷阱。例如：
function Component() {
return
<div>{/*假设这行JSX语句很长*/}</div>;
}
放到编译器里会生成：
function Component() {
return;
React.createElement("div", null);
}
发现了没有
这都还没走到 React.createElement就被return了
为了修正这个问题，我们需要为 JSX 加上括号：
function Component() {
return (
<div>{/*假设这行JSX语句很长，为了提升一些代码可读性，特地换行*/}</div>
);
}
再次编译：
function Component() {
return React.createElement("div", null);
}
这才是我们最终想要的效果了~
小结
希望这篇文章能够给你带来收获~🎉🎉
