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

@eyasliu 2016-06-15 15:36:30发表于 eyasliu/blog react前端

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。