18-JSX的好处以及JSX与HTML的差别

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

现在我们已经看到了实际应用的JSX，也许你对它已经不再那么怀疑了。但是，如果仍旧持保留态度，重要的是考虑JSX为使用React组件带来的诸多好处。下面是其中两个好处。

类似于HTML且语法简单——如果重复编写 React.createElement 让人感到乏味，或者发现嵌套让人无所适从，那你并不孤单。JSX与HTML的相似性使得用熟悉的方式声明组件结构更为简单而且极大地提高了可读性。
声明式和封装——通过将组成视图的代码与相关联的方法包含在一起，使用者创建了一个功能组。本质上，你需要知道的有关组件的所有信息都汇聚在一处，无关紧要的东西被隐藏起来，这意味着使用者能够更容易地思考组件并且更加清楚它们作为一个系统是如何工作的。

这可能感觉像回到了20世纪90年代末那种混合着JavaScript编写标记语言的情况，但这并不意味着它是个坏主意。

需要注意的是，JSX不是HTML（或者XML）——它只会转义成常规React代码，就像到目前所写的，而且它的语法和惯例也不完全相同。需要关注一些细微的差异，后续章节将更全面地讨论这些差异，但我先简要地介绍其中的一些。

HTML标签与React组件——使用 React.createClass 创建的自定义React组件按惯例首字母是大写的，所以我们能够分辨自定义组件和原生HTML组件。
属性表达式——当想使用JavaScript表达式作为属性值时，如代码清单2-8所示，将表达式包在一对大括号中（ <Comment a={this .props.b}/> ），而不是双引号中（ <User a="this.props.b"/> ）。
布尔属性——省略一个属性的值（ <Planactive/>, <Input checked/> ）会让JSX将其视为 true 。要传入 false 值，必须使用属性表达式（ attribute={false} ）。
嵌套表达式——要在元素内部插入表达式的值，也需要使用大括号（ <p>{this.props. content}</p> ）。

JSX中有些细微差别，甚至偶尔有些“颇费思量之处”，后续章节会探讨所有这些内容。我们会在组件中大量使用JSX，现在我们已经开始使用JSX，因此我们将能够更容易地创建、阅读和思考组件。