Question

不，这么说并不确切。我们看到的内容是 jsx 的应用，但是那些看起来类似 HTML 的语法并不表示真实的 DOM 节点。相反，它们是 React 内部表示 DOM 节点的一种语法糖，这种写法也同样包含在所有你之前声明的组件中，包装在花括号中的代码表示脱离这个语法。看看 ThingList 类预编译以后的版本吧：

var ThingList = React.createClass({
    displayName: 'ThingList',
    render: function() {
        return (
            React.DOM.h1(null, "My Things:"),
            Thing({name: "Hello World"})
        );
    }
})

如果这个版本对于你来说更有意义的话，那就符合我的预期。当我第一次开始使用 React 时，我特别讨厌这种类似 HTML 的语法。但是，当组件变得越来越复杂的时候，你可能就会开始欣赏 jsx 语法了，例如：

var ComplexThing = React.createClass({
    render: function() {
        return (

            <div className="complexThing">
                <Thing name="thing one" />
                <Thing name="thing two" />
            </div>,
            <a href="back.html">Go Back</a>
        );
    }
});

编译后，没有 jsx 语法的版本：

var ComplexThing =React.createClass({
    displayName: 'ComplexThing',
    render: function() {
        return (
            React.DOM.div(
                {className:"complexThing"},
                Thing({name:"thing one"}),
                Thing({name:"thing two"})
            ),
            React.DOM.a(
                {href:"back.html"}, "GoBack"
            )
        );
    }
});