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本身就是表达式。所以我们看到之前的代码中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 开发大型项目的能力。