《React+Redux前端开发实战》—1.4 JSX语法

1.4  JSX语法

　　前面一起了解了React的3个主要特征。本节将带领读者来学习React书写的“最佳姿势”——JSX语法。它是由React官方推出的一种基于JavaScript的拓展语法。虽然不是使用React编写代码的必要条件，不过相信当读者了解到JSX的好处之后，便不会使用原生JavaScript开发React了。

1.4.1  JSX简介

　　JSX（JavaScript XML），是JavaScript的一种拓展语法。可以在JavaScript代码中编写更像XML写法的代码。React官方推荐使用JSX替代常规JavaScript写法，从而让代码更直观，达到更高的可读性。但需要注意的一点是，它不能直接在浏览器中执行，需要经过转换器将JSX语法转为JS之后才可以。从本质上来讲，JSX也只是React.createElement（component, props, ...children）函数的语法糖，所以在JSX当中，依旧可以正常使用JavaScript表达式。

　　当然，使用JSX并不是React开发应用的必要条件，JSX是独立于React的，也可以不使用。

　　下面通过两个示例来对比一下使用原生JS和使用JSX的区别，它们都是用来在页面中展示一个HelloReact的文案。

　　Before：使用原生JS实现Hello React。

　　class HelloMessage extends React.Component {

　　  render() {

　　    return React.createElement(

　　      "div",

　　      null,

　　      "Hello React"

　　    );

　　  }

　　}

　　ReactDOM.render(React.createElement(HelloMessage, null), mountNode);

　　After：使用JSX实现HelloReact。

　　class HelloMessage extends React.Component {

　　  render() {

　　    return (

　　      <div>Hello React</div>

　　    );

　　  }

　　}

　　ReactDOM.render(

　　  <HelloMessage />,

　　  mountNode

　　);

　　再来看一个略微“复杂”的示例，三层div嵌套，还是输出HelloReact。

　　Before：使用原生JSX实现。

　　class HelloMessage extends React.Component {

　　  render() {

　　    return React.createElement(

　　      "div",

　　      null,

　　      React.createElement(

　　        "div",

　　        null,

　　        React.createElement(

　　          "div",

　　          null,

　　          "Hello React"

　　        )

　　      )

　　    );

　　  }

　　}

　　ReactDOM.render(React.createElement(HelloMessage, null), mountNode);

　　After：使用JSX实现。

　　class HelloMessage extends React.Component {

　　  render() {

　　    return (

　　      <div>

　　        <div>

　　          <div>Hello React</div>

　　        </div>

　　      </div>

　　    );

　　  }

　　}

　　ReactDOM.render(

　　  <HelloMessage />,

　　  mountNode

　　);

　　从上面两个案例的对比中可以明显看出，JSX语法更接近开发者平时的书写方式。