深入理解JSX

    JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。

    对于Web项目而言，React的JSX提供了一组类似于HTML的XML标签，转译后，XML会被转译为针对React库的函数调用，如下：

<h1>Hello World</h1>

会被转译为：

React.createElement("h1",null,"Hello World");

一、JSX与HTML

    对于Web场景而言，JSX看上去就像HTML，但他并不是HTML规范的具体实现。React的创造者只是让JSX足够像HTML，这样就可以用来正确的描述Web界面，并没有忽略这个事实。即他仍然应该遵循JavaScript的风格和语法。

二、JSX和HTML的不同之处

    在使用JSX来编写HTML语法时，应当了解以下三个重要的方面：

• 标签特性采用驼峰式大小写风格；
• 所有元素都必须闭合；
• 特性名称基于DOM API而非HTML语言规范；

1、标签特性采用驼峰式大小写风格

例如，在HTML中，输入标签可以包含一个可选的maxlength特性：

<input type="text" maxlength="30"/>

在JSX中，该特性应该写作maxLength（请注意大写字母L）：

return <input type="text" maxLength="30"/>

2、所有元素都必须闭合

    由于JSX是XML，因此元素都必须闭合，诸如<br>和<img>这样的标签并不包含结束标签，需要自闭合。所以要使用<br/>而不是<br>，要使用<img src="..."/>而不是<img src="...">。

3、特性名称基于DOM API

    这一点可能难以理解，实际上非常简单。在与DOM API进行交互时，标签特性的名称可能会和在HTML中使用时有所不同。其中一个例子就是class和className。例如，在HTML中：

<div id="box" class="some-class"></div>

    如果你想要使用普通JavaScript来操作DOM并改变它的类名，你可能会编写这样的代码：

document.getElementById("box").className="some-other-class";

    由于JSX只是JavaScript的一种语法扩展，它遵循了DOM所定义的特性命名规范，同样的div用JSX来表示应该是：

return <div id="box" className="some-class"></div>

三、JSX的怪异之处

1、单一根节点

    React组件只能渲染一个根节点，想要了解这个限制的原因，我们来看看render函数的一个返回实例：

return (
    <h1>Hello World</h1>
)

    它被转换成一条语句：

return React.createElement("h1",null,"Hello World");

    但是，以下代码却是不合法的：

return (
    <h1>Hello World</h1>
    <h2>Have a nice day</h2>
)

    需要明确的是，这并非JSX的限制，而是JavaScript的一个特性：一条返回语句只能返回单个值，而在前面的代码中我们尝试返回两条语句（两次React.createElement调用）。解决的方法很简单：就像你在普通JavaScript中那样，将所有返回值包含到一个根对象中。

return (
   <div>
     <h1>Hello World</h1>
     <h2>Have a nice day</h2>
   </div>
)

进而被转换成：

return React.createElement("div",null,
    React.createElement("h1",null,"Hello World"),
    React.createElement("h2",null,"Have a nice day"),
)

    它返回单个值，并且是通过合法的JavaScript完成的。