@qinyun
2018-06-25T17:26:51.000000Z
字数 2566
阅读 1370
未分类
在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本身就是表达式。所以我们看到之前的代码中element返回的是一
个html的节点。
第二、在属性中使用表达式。如果我们要给一个组件传递一个属性的值,那么这个属性的值可以是一个JavaScript的表达式,可以说是1+2+3+4这样一个表达式,它有一个返回值。
第三、可以使用延展属性。如果我们要给一个组件传递一组值,不需要一个个去填写,因为可能已经有了一个属性的Object,我们只需要用“…”这种语法。这个其实也不完全是JSX独创的语法,这个是es6中就有这种延展的操作符,所以可以去给他传一批属性。
第四、表达式是可以作为子元素的。子元素是react的一个特殊属性,这个属性会传给children,作为子元素,就需要返回值是一个可return的节点,所以说它可能是一个组件node,或者是一个原生node的再或者一个字符串等等。
我们可以稍微对比一下其他的模板语言,那来看一下JSX究竟是有什么特别之处,
[图5]
比如说这个是一个Angular的模板,是一种大家都很熟悉的风格,在html标记中给它一些特殊的属性,有一个解释器去解释这些属性,最终来重新组织UI,所以这个是对比其他模板语言的一个特性,其他模板语言是需要你去学习新的语法,JSX是不需要去学习的,
所以我们可以看到JSX的优点:
- 第一个、它可以用声明式的方式去创建界面,这是一个非常直观的过程,你有非常多的html标记,除了原生的还有你自己定义的,也很方便的去描述UI。
第二、它拥有代码创建界面的灵活性,什么时候创建节点、什么时候这个节点应该消失、属性什么时候发生变化,都是像写JavaScript代码一样,非常灵活。
第三、它可以让你不需要去学习一门新的模板语言,你只要需要了解JavaScript语法和JSX的特性,就可以立刻用JSX来描述组件。
最后,要强调的是JSX有一个约定,也是React用来区分自定义组件和原生DOM节点的一个约定:所有的自定义组件都必须以大写字母开头。
它认为小写的tag都是原生的DOM节点,比如div,所有大写字母开头的都是自定义组件,这样React会去找这个组件的定义,然后去认得它。
JSX标记也是可以使用属性的语法的,比如说,就是一个合法的JSX的标记,如果是用属性语法,就不需要遵循大写字母开头这样的约定了。
我是王沛,现担任 eBay 中国研发中心资深技术专家,负责 eBay 内部前端框架的研发。在React 16版本更新后,我发现即使React拥有前端框架中最繁荣的生态圈,网上很多中文教程依旧跟不上React更新的步伐,甚至很多教程还有很多低级的错误。React作为目前最受招聘企业欢迎的技能,我希望将最新、最严谨、成体系的的技术分享给你。
所以我和极客时间一起,打磨了45节课程的《React从入门到精通》视频专栏,由浅入深地介绍 React 技术栈的基本概念、原理以及设计模式。
课程采用理论讲解加代码演示的方式,在讲清楚概念的同时,结合具体场景,帮你将概念和模式应用到实际案例中。我们也提供了线上实战项目帮助你熟悉和彻底掌握所学知识。
相信学完本课程后,你可以掌握使用 React 开发大型项目的能力。