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

xorpay 发布于2019-08-19 18:32 / 3192人阅读

摘要：是一个看起来像的语法扩展。有人觉得看起来太怪异了，但是我觉得是一个伟大的尝试，是科学进步的表现，我们不应该对他有任何偏见。所以有一个口号，就是所以，的是一个伟大的尝试，我们应该拥抱。

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

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。

GPU云服务器云服务器最伟大的编程语言拥抱新增长伟大云服务器怎么解决你正尝试从不属于

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79676.html

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

摘要：是一个看起来像的语法扩展。有人觉得看起来太怪异了，但是我觉得是一个伟大的尝试，是科学进步的表现，我们不应该对他有任何偏见。所以有一个口号，就是所以，的是一个伟大的尝试，我们应该拥抱。原文： http://eyasweb.com/#/blog/detail/12 react 带来了新的语法，JSX。是一个看起来像XML的JavaScript语法扩展。有些同学因为不喜欢或不习惯JSX语...

blair 2019-08-01 15:22 评论0 收藏0
使用webpack和babel搭建react开发环境

摘要：译文原文来自写在前面使用已经蛮长一段时间但是在新项目开始之际都是东拼西凑其他项目的配置来使用如果要自己从零开始写一个完整项目的配置估计得费死劲所以在发布版本之际正是时候来认真从零开始学习了是一个出自的库用于构建用户交互界面是一个非常厉害的有译文,原文来自https://scotch.io/tutorials/s...写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,...

AZmake 2019-08-20 15:58 评论0 收藏0
Deno 并不是下一代 Node.js

摘要：长文预警字，图。开发并不是因为，也不是为了取代。不知道从官方介绍来看，可以认为它是下一代是如何脑补出来的。只是一个原型或实验性产品。所以，不是要取代，也不是下一代，也不是要放弃重建生态。的目前是要拥抱浏览器生态。这几天前端圈最火的事件莫过于 ry(Ryan Dahl) 的新项目 deno 了，很多 IT 新闻和媒体都用了标题：下一代 Node.js。这周末读了一遍 deno 的源码，...

mmy123456 2019-08-26 11:59 评论0 收藏0
[译]JSX：硬币的另一面

摘要：它不过是硬币的另一面。因此，既然我们能够接受与通过这种方式混合在一块儿，那么是时候让介入并向我们展示硬币的另一面了第三阶段的并不是一个激进的改变，是因为我们这个行业从一开始就注定和应该是在一起的。 React框架刚刚发布的时候，JSX颠覆了很多人的想法。习惯了HTML标签与JavaScript代码分离的前端工程师们，看到JSX大概都会不禁吐槽：这些奇怪的标签出现在JavaScript里...

mudiyouyou 2019-08-20 14:28 评论0 收藏0
React项目从Javascript到Typescript的迁移经验总结

摘要：面对越来越火的，我们公司今年也逐渐开始拥抱。综上所述，我个人觉得是要删除相关的东西，降低项目复杂度。但是有一个例外情况。这个配置项有三个值可选择，分别是和。模式会生成，在使用前不需要再进行转换操作了，输出文件的扩展名为。抛转引用现在越来越多的项目放弃了javascript，而选择拥抱了typescript，就比如我们熟知的ant-design就是其中之一。面对越来越火的typesc...

zhisheng 2019-08-23 17:17 评论0 收藏0