拥抱 JSX，它是一个伟大的尝试
react 带来了新的语法，JSX。是一个看起来像XML的JavaScript语法扩展。
有些同学因为不喜欢或不习惯JSX语法，而拒绝学习React。有人觉得JSX看起来太怪异了，但是我觉得JSX是一个伟大的尝试，是科学进步的表现，我们不应该对他有任何偏见。
我们从渲染的历史角度解释一下JSX的前瞻性
渲染的历史
html 与脚本混合
在asp年代和php早期，人们的代码都是html和脚本混合的就像这样子
Hello
这种代码的优点是简单。但是缺点是非常难以维护，项目一旦稍微复杂一点，维护它将是一个噩梦，这也决定了这种方式是写不出复杂项目的。所以后来诞生了 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 # Hello {{name}}
}
但是事实上真的是倒退的发展吗？如果真的是倒退的发展，为什么 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。
关键字：JavaScript, react.js, jsx, html
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
