拥抱 JSX，它是一个伟大的尝试

原文： http://eyasweb.com/#/blog/detail/12

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。