react 带来了新的语法，JSX。是一个看起来像XML的JavaScript语法扩大。
有些同砚由于不喜欢或不习惯JSX语法，而谢绝进修React。有人以为JSX看起来太奇异了，然则我以为JSX是一个巨大的尝试，是科学提高的表现，我们不应当对他有任何私见。
我们从衬着的汗青角度解释一下JSX的前瞻性
衬着的汗青
html 与剧本夹杂
在asp年代和php初期，人们的代码都是html和剧本夹杂的就像这模样
<?php $name = "world"; ?>
<h1>Hello <?php echo $name; ?></h1>这类代码的长处是简朴。然则瑕玷是异常难以保护，项目一旦轻微庞杂一点，保护它将是一个恶梦，这也决议了这类体式格局是写不出庞杂项目的。所以厥后诞生了 MVC 形式的开辟体式格局
MVC 形式
MVC 形式将 view 与逻辑星散了，view 只体贴怎样输出变量。这类星散体式格局使得项目保护性和易用性大大的增强了，而且使得项目越发的范例化。
模板言语
MVC 使 view 与逻辑星散了，然则输出变量照样不轻易，所以林林总总的模板言语诞生了，比方什么 Smarty、Twig、Haml、Liquid、Mustache等等，都是为了更好的去衬着模板。这个时刻运用模板引擎能够在肯定程度上完成组件化了。不过这类组件化只是字符串拼接级别的组件化罢了。
前端衬着
跟着前端开辟的高速生长，前端衬着逐步登上汗青舞台。MVC 形式中的 view 也逐步的退步，而后端逐步的演化成了api效劳。
前端衬着直接就涌现了种种的前端模板引擎，如underscore、Mustache、artTemplate等基于字符串的模板。别的 angular、vue等框架也制造了基于DOM的模板引擎。现在置信许多前端开辟的人都已习惯了这类模板开辟体式格局。
JSX
那末，衬着的汗青先举行到这里，我们回过头来看看JSX。我们看看JSX的语法，乍一看，它彷佛回到了解放前的那种 html和剧本夹杂 的形式。
const Hello = props => {
const name = 'world';
return <h1>Hello {{name}}</h1>
}
然则事实上真的是倒退的生长吗？假如真的是倒退的生长，为何 React 这个框架在终究不只没有死掉，而且还火起来了呢？这里肯定是有缘由的。
中间变化
我们纵观衬着的汗青生长，他们都有一个配合的特性，都是以 html 为中间，在 html 输出变量，在 html 中嵌入前提推断与轮回。无论是剧本夹杂，模板言语，DOM模板，他们都是围绕着 html而举行的。
而 JSX 是以 js 为中间，在 js 中嵌入 html，是对js的扩大。js是一门剧本言语，自身就是为处置惩罚逻辑而生的，在js中嵌入一部分html才是更合理的做法。
以js为中间，最显著的优点就是，能够越发准确和越发轻易的掌握输出，而且 JSX 相称因而基于DOM的一种模板引擎，所以输出的html越发的相符范例。
JSX的转换
JSX 的终究是会转化为 js，试过将html模板编译为js模板的人就会晓得，js模板是远远的比html效率高。首先是少了html模板的收集要求，其次是在实行的时刻少了编译的历程，由于在天生js文件的时刻就已被编译好了，不会再客户端浪费资本去编译。
假造DOM
JSX 的最大的优点在于，对假造DOM的集成。在衬着的时刻，在逻辑中就已明白的全部运用的构造，这时候在内存中存储一个DOM构造，在下次衬着的时刻对照底本DOM，只衬着发生了变化的一部分。有人说由于假造DOM 大大的提升了 React 机能。其实不然，我以为假造DOM的衬着体式格局，跟传统DOM操纵或许会好一点，然则好的并不会异常显著，由于对照DOM节点也是须要盘算资本的。
假造DOM最大优点在于轻易的跟其他平台的集成，比方 react-native 就是基于假造DOM，然后衬着出了原生控件，由于react组件能够映照为对应的原生控件。在输出的时刻，是输出html DOM，照样安卓控件，照样IOS控件，这是由平台决议了。
所以 React 有一个标语，就是
Learn Once, Write Anywhere
所以，react 的 JSX 是一个巨大的尝试，我们应当拥抱 JSX。
