[关闭]
@qinyun 2018-06-25T09:26:51.000000Z 字数 2566 阅读 1238

React中的JSX看上去像是一种语言模板,但其实它是语法糖

未分类


在React的开发中,会经常使用一种特殊的语法来描述React的组件,叫做JSX,虽然它看上去像是一种模板语言,但是其实它是一种语法糖。

JSX能够让你在JavaScript代码中直接写html的标记,这也是React推出时最受争议的一点,就是如何去把UI的描述放到了代码中。

[图1]
比如我们先来定义一个变量const name = ‘ Nate Wang ’,然后定义一个HTML的const element = Hello 把这个变量显示出来,定一个h1的标记。
所以可以看到element直接就用了一个html标记,它来表示一个节点,之所以这样去写,是因为它的本质是在于动态创建了一个组件,而且用的是JavaScript的语法。

如果你了解DOM的API的话,会知道除了用html去描述一个节点,仍然可以用JavaScript 的DOM API,比如说Comment.creatElement 的方式来创建一个原生的DOM节点。

对React来说它也是一样,当我们要创建一个组件的时候,既可以用声明是的方式像html标记一样去生命一个组件,同样我们也可以用JavaScript语法比如说React.creatElement来动态地创建一个组件。

[图2]
所以上图是一个很简单的例子,创建一个h1的标记,给它了一个标记的类型,h1就是Comment的第一个参数标记的类型。第二个传给它的属性,右侧没有,所以是null,Hello是他的children,name也是他的children,
从第三个参数开始后面都是这个元素的子元素,所以创建一个h1这样的Element,大家可以很清楚的看到左边和右边哪一种更直观,所以说JSX的本质是:可以让你去一种更方便的方式动态的创建组件。


[图3]
看一个稍微复杂一点的例子,CommentBox 是一个评论框组件,一个自定义的组件,这里面不仅用到了DOM原生组件,还用到了自定义的组件,每个组件还可能给他它传一些属性,有些组件有可能会有children。

所以我们可以对应看右边可以看到,我们用一个React.creatElement ,产生div,传给它一些属性className,div下面的所有子节点一共有三个,分别用React.creatElement 来创建:h1、CommenList、CommentForm。

所以说JSX就是,让你以声明方式来描述了这个动态创建组建的一个过程。

这样的好处在于:开发者可以完全利用JavaScript本身的语法,而不是发明了一种模板语言。
在其他的框架或者是在传统的模式下,开发者通常要学习一门模板语言来描述UI的变量,或者格式化的函数如何调用等等,但JSX并不是一个模板语言,它就是换了一种写法的JavaScript,让开发者可以利用JavaScript本身的特性来做动态创建UI的事情。

在JSX中去动态地使用JavaScript的特性最核心的概念就是表达式。


[图4]
表达式是一个会返回一个值的一个JavaScript的语法:

我们可以稍微对比一下其他的模板语言,那来看一下JSX究竟是有什么特别之处,

[图5]
比如说这个是一个Angular的模板,是一种大家都很熟悉的风格,在html标记中给它一些特殊的属性,有一个解释器去解释这些属性,最终来重新组织UI,所以这个是对比其他模板语言的一个特性,其他模板语言是需要你去学习新的语法,JSX是不需要去学习的,

所以我们可以看到JSX的优点:
- 第一个、它可以用声明式的方式去创建界面,这是一个非常直观的过程,你有非常多的html标记,除了原生的还有你自己定义的,也很方便的去描述UI。

它认为小写的tag都是原生的DOM节点,比如div,所有大写字母开头的都是自定义组件,这样React会去找这个组件的定义,然后去认得它。
JSX标记也是可以使用属性的语法的,比如说,就是一个合法的JSX的标记,如果是用属性语法,就不需要遵循大写字母开头这样的约定了。

作者说:

我是王沛,现担任 eBay 中国研发中心资深技术专家,负责 eBay 内部前端框架的研发。在React 16版本更新后,我发现即使React拥有前端框架中最繁荣的生态圈,网上很多中文教程依旧跟不上React更新的步伐,甚至很多教程还有很多低级的错误。React作为目前最受招聘企业欢迎的技能,我希望将最新、最严谨、成体系的的技术分享给你。

所以我和极客时间一起,打磨了45节课程的《React从入门到精通》视频专栏,由浅入深地介绍 React 技术栈的基本概念、原理以及设计模式。
课程采用理论讲解加代码演示的方式,在讲清楚概念的同时,结合具体场景,帮你将概念和模式应用到实际案例中。我们也提供了线上实战项目帮助你熟悉和彻底掌握所学知识。

相信学完本课程后,你可以掌握使用 React 开发大型项目的能力。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注