关于javascript:为什么-JSX-语法这么香

前言
时下尽管接入 JSX 语法的框架（React、Vue）越来越多，但与之缘分最深的毫无疑问依然是 React。2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但现在，越来越多的人面对 JSX 都要说上一句“真香”！典型的“真香”系列。
JSX 是什么？
依照 React 官网的解释，JSX 是一个 JavaScript 的语法扩大，相似于模板语法，或者说是一个相似于 XML 的 ECMAScript 语法扩大，并且具备 JavaScript 的全副性能。
这段解释可抽离两个关键点：

「JavaScript 语法扩大」
「具备 JavaScript 的全副性能」

JSX 的定位是 JavaScript 的「语法扩大」，而不是“某个版本”，这就决定了浏览器并不会像人造反对 JavaScript 一样反对 JSX。这就引出了一个问题“JSX 是如何在 JavaScript 中失效的？”
JSX 语法是如何在 JavaScript 中失效的？
React
在 React 框架中，JSX 的语法是如何在 JavaScript 中失效的呢？React 官网给出的解释是，JSX 会被编译为 React.createElement()，React.createElement() 将返回一个叫作“React Element”的 JS 对象。
对于 JSX 的编译是由 Babel 来实现的。
Babel 是一个工具链，次要用于将采纳 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便可能运行在以后和旧版本的浏览器或其余环境中。
当然 Babel 也具备将 JSX 转换为 JS 的能力，看一个例子：右边是咱们 React 开发中写到的语法，并且蕴含了一段 JSX 代码。通过 Babel 转换之后，就全副变成了 JS 代码。

其实如果认真看，发现 JSX 更像是一种语法糖，通过相似模板语法的形容形式，形容函数对象。其实在 React 中并不会强制应用 JSX 语法，咱们也能够应用 React.createElement 函数，例如应用 React.createElement 函数写这样一段代码。
class Test extends React.Component {
render() {

return React.createElement(
  "div",
  null,
  React.createElement(
    "div",
    null,
    "Hello,",
    this.props.test
  ),
  React.createElement("div", null, "Today is a fine day.")
);

}
}

ReactDOM.render(
React.createElement(Test, {

test: "baixiaobai"

}),
document.getElementById(“root”)
);

在采纳 JSX 之后，这段代码会这样写：
class Test extends React.Component {
render() {

return (
    <div>
        <div>Hello, {this.props.test}</div> 
        <div>Today is a fine day.</div>
    </div>
);

}
}
ReactDOM.render(
<Test test=”baixiaobai” />,
document.getElementById(‘root’)
);

通过比照发现，在理论性能成果统一的前提下，JSX 代码层次分明、嵌套关系清晰；而 React.createElement 代码则给人一种十分凌乱的“杂糅感”，这样的代码不仅读起来不敌对，写起来也吃力。
JSX 语法写进去的代码更为的简洁，而且代码构造档次更加的清晰。
JSX 语法糖容许咱们开发人员像写 HTML 一样来写咱们的 JS 代码。在升高学习老本的同时还晋升了咱们的研发效率和研发体验。
Vue
当然在 Vue 框架中也不例外的能够应用 JSX 语法，尽管 Vue 默认举荐的还是模板。
为什么默认举荐的模板语法，援用一段 Vue 官网的原话如下：
任何合乎标准的 HTML 都是非法的 Vue 模板，这也带来了一些特有的劣势：

对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更天然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的晋升，那么它就有主观的价值存在。
基于 HTML 的模板使得将已有的利用逐渐迁徙到 Vue 更为容易。
这也使得设计师和新人开发者更容易了解和参加到我的项目中。
你甚至能够应用其余模板预处理器，比方 Pug 来书写 Vue 的模板。

有些开发者认为模板意味着须要学习额定的 DSL (Domain-Specific Language 畛域特定语言) 能力进行开发——咱们认为这种区别是比拟浮浅的。首先，JSX 并不是没有学习老本的——它是基于 JS 之上的一套额定语法。同时，正如同相熟 JS 的人学习 JSX 会很容易一样，相熟 HTML 的人学习 Vue 的模板语法也是很容易的。最初，DSL 的存在使得咱们能够让开发者用更少的代码做更多的事，比方 v-on 的各种修饰符，在 JSX 中实现对应的性能会须要多得多的代码。
更形象一点来看，咱们能够把组件辨别为两类：一类是偏视图体现的 (presentational)，一类则是偏逻辑的 (logical)。咱们举荐在前者中应用模板，在后者中应用 JSX 或渲染函数。这两类组件的比例会依据利用类型的不同有所变动，但整体来说咱们发现体现类的组件远远多于逻辑类组件。
例如有这样一段模板语法。
<anchored-heading :level=”1″>
<span>Hello</span> world!
</anchored-heading>

应用 JSX 语法会写成这样。
render: function (h) {
return (

<AnchoredHeading level={1}>
  <span>Hello</span> world!
</AnchoredHeading>

)
}

转换为 createElement 转换的 JS 就变成了这样。
createElement(
‘anchored-heading’, {

props: {level: 1}

}, [

createElement('span', 'Hello'),
'world!'

]
);

然而不论是模板语法还是 JSX 语法，都不会失去浏览器纯天然的反对，这些语法最初都会被编译成相应的 h 函数（createElement 函数，不泛指所有版本，在不同版本有差别）最初变成 JS 对象，这里的编译也是和 React 一样应用的 Babel 插件来实现的。
不论是 React 推崇的 JSX 语法，还是 Vue 默认的模板语法，目标都是为了让咱们写进去的代码更为的简洁，而且代码接口档次更加的清晰。在升高学习老本的同时还晋升了咱们的研发效率和研发体验。
读到这里，置信你曾经充沛了解了“JSX 是 JavaScript 的一种语法扩大，它和模板语言很靠近，并且具备 JavaScript 的全副性能。”这一定义背地的深意。
不论是 React 还是 Vue 咱们都提到了一个函数 createElement，这个函数就是将咱们的 JSX 映射为 DOM 的。