react学习笔记 item2 --- JSX

JSX 即 JavaScript XML， 是Facebook 团队提出的一种在react组件内部构建标签的类XML 语法。可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。这种语法方案需要编译转换成真实可用的 JavaScript 代码。 react在不使用JSX的情况下一样可以工作，但是Facebook团队推荐在react使用JSX语法，那么JSX 到底有哪些优势呢？

一、使用JSX的优势

1、更加语义化

在react中，我们可以利用 JavaScript 的语法来书写 html 标签，并且还可以定义自己的组件，这些组件可以根据应用场景，使用更加语义化、更加有意义的标签。这样我们就避开了复杂了JavaScript逻辑，虽然最后都会转换为JavaScript，但是只要熟悉html的设计师以及测试产品的质量保证的人员，都能轻松的阅读组件代码。

2、更加直观

在react中，我们可以将代码分成一个一个组件，每一个组件负责一个功能。通过对各种组件的组合引用，可以构成一个大项目。

例如我们需要创建一个Divider 组件。我们注意到在函数作用域内，使用JSX 语法的版本与使用原生JavaScript 相比，其标签的意图变得更加直观，可读性也更高。

以下是原生JavaScript版本：

// v0.11
render: function () {
   
        return React.DOM.div({className:"divider"},
        "Label Text",
        React. DOM.hr()
        );
    }

以下是使用JSX的版本：

render: function () {
        return <div className="divider">
        Label Text<hr />
        </div>;
    }

通过对比，我们能发现JSX更直观，也更易懂。

组件化

组件化，也是react的核心，旨在将HTML 标签以及生成这些标签的代码内在地紧密联系在一起，封装成组件，把所有的逻辑和标签封装在其中。与之前的将html、 css 和JavaScript分离不同的是，在 react 中，将以组件和单位，所有的html 、css 和JavaScript都封装在组件中。刚开始，可能会觉得比较别扭，但是当你真正熟悉了JSX 之后，会觉得 JSX 不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑。

JSX 不仅具有这么多优势，而且上手也非常快。下面就具体介绍一下 JSX 的语法使用。

二、JSX语法

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。JSX 允许直接在模板插入 JavaScript 变量。

1、封装自己的组件

var HelloMessage = React.createClass({
  render: function() {
   
    return <h1>Hello World！</h1>;
  }
});

上面我们封装一个输出 “Hello World！” 的组件，组件名为 HelloMessage。

上述代码中，我们可以封装多个 html 标签，但是当有多个标签时，需