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

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。

eyasliu / blog