在 React 中使用 JSX 的好处

优点：

1.允许使用熟悉的语法来定义 HTML 元素树；

2.提供更加语义化且移动的标签；

3.程序结构更容易被直观化；

4.抽象了 React Element 的创建过程；

5.可以随时掌控 HTML 标签以及生成这些标签的代码；

6.是原生的 JavaScript。

对于各种优点下面详细介绍一下：

1.更加熟悉：许多团队都包括了非开发人员，例如熟悉 HTML 的 UI 以及 ux 设计师和负责完整测试产品的质量保证人员。使用 JSX 之后，这些团队成员都可以更轻松的阅读和贡献代码。任何熟悉基于 XML语言的人都可以轻松的掌握 JSX。此外，由于 React 组件囊括了所有可能的 DOM 表现形式（后续详细解释），因此 JSX 能巧妙地用简单明了的方式来展现这种结构。

2.更加语义化：提供更加语义化且易懂的标签(将传统的HTML标签封装成React组件)，我们就可以像使用HTML标签一样使用这个组件。

3.更加直观：JSX 让小组件更加简单、明了、直观。在有上百个组件及更深层标签树的大项目中，这种好处会成倍地放大。在函数作用域内，使用 jsx 语法的版本与使用原生 JavaScript 相比，其标签的意图变得更加直观，可读性也更高。

4.抽象化：对于使用 jsx 的人来说，从 React0.11升级到 React0.12是无痛的——不需要修改任何代码。虽然不是灵丹妙药，但是 jsx 提供的抽象能力确实能够减少代码在项目开发过程中的改动。

5.关注点分离：将HTML 标签以及生成这些标签的代码内在地紧密联系在一起。在 React 内，你不需要把整个程序甚至单个组件的关注点分离成视图和模板文件。相反，React 鼓励你为每一个关注点创造一个独立的组件，并把所有的逻辑和标签封装在其中。

JSX 以干净切简洁的方式保证了组件中的标签与所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑。