摘要：使用，不一定非要使用語(yǔ)法，可以使用原生的進(jìn)行開(kāi)發(fā)。注意標(biāo)簽的屬性和，需要寫(xiě)成和。因?yàn)閮蓚€(gè)屬性是的保留字和關(guān)鍵字。在的設(shè)定中，初始化完后，是不可變的。改變會(huì)引起無(wú)法想象的后果。重要的是這個(gè)過(guò)程是由操控的，不是手動(dòng)添賦值的屬性。

JSX可以看作JavaScript的拓展，看起來(lái)有點(diǎn)像XML。使用React，可以進(jìn)行JSX語(yǔ)法到JavaScript的轉(zhuǎn)換。

使用React，不一定非要使用JSX語(yǔ)法，可以使用原生的JS進(jìn)行開(kāi)發(fā)。但是React作者強(qiáng)烈建議我們使用JSX，因?yàn)镴SX在定義類似HTML這種樹(shù)形結(jié)構(gòu)時(shí)，十分的簡(jiǎn)單明了。簡(jiǎn)明的代碼結(jié)構(gòu)更利于開(kāi)發(fā)和維護(hù)。
XML有著開(kāi)閉標(biāo)簽，在構(gòu)建復(fù)雜的樹(shù)形結(jié)構(gòu)時(shí)，比函數(shù)調(diào)用和對(duì)象字面量更易讀?？磦€(gè)直接的對(duì)比：

#使用JSX
React.render(
    

        

            
content
        
    
,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("div", null,
        React.createElement("div", null,
            React.createElement("div", null, "content")
        )
    ),
    document.getElementById("example")
);

  
JSX并不是新語(yǔ)言，也沒(méi)有改變JavaScript的語(yǔ)法，只是對(duì)JavaScript的拓展。

React.render方法可以渲染HTML結(jié)構(gòu)，也可以渲染React組件。
渲染HTML標(biāo)簽，聲明變量采用首字母小寫(xiě)

var myDivElement = 
;
React.render(myDivElement, document.body);

渲染React組件，聲明變量采用首字母大寫(xiě)

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);

通過(guò)變量的聲明，來(lái)區(qū)分HTML標(biāo)簽和React組件，這個(gè)可以看作一個(gè)約定吧。

  
注意：標(biāo)簽的屬性class和for，需要寫(xiě)成className和htmlFor。因?yàn)閮蓚€(gè)屬性是JavaScript的保留字和關(guān)鍵字。無(wú)論你是否使用JSX。

#使用JSX
React.render(
    content,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("label", {className: "xxx", htmlFor: "input"}, "content"),
    document.getElementById("example")
);

React JSX將類似XML的語(yǔ)法轉(zhuǎn)化到原生的JavaScript，元素的標(biāo)簽、屬性和子元素都會(huì)被當(dāng)作參數(shù)傳給React.createElement函數(shù)：

#JSX
var Nav;
var app = 

表達(dá)式用{}包起來(lái)，不要加引號(hào)，加引號(hào)就會(huì)被當(dāng)成字符串。

JSX是HTML和JavaScript混寫(xiě)的語(yǔ)法，當(dāng)遇到<，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析。

React.render(
    
 1 ? "class-a" : "class-b"}>content
,
    document.body
);

var Nav = React.createClass({
    render: function () {
        return 
nav
    }
});

React.render(
    

        {2 > 1 ? 
,
    document.body
);

同JavaScript注釋一樣

單行注釋 // comments

多行注釋 /* comments */

如果提前就知道了組件的屬性的話，寫(xiě)起來(lái)很容易。例如component組件有兩個(gè)動(dòng)態(tài)的屬性foo和bar：

var component = ;

而實(shí)際上，有些屬性可能是后續(xù)添加的，我們沒(méi)辦法一開(kāi)始就確定，我們可能會(huì)寫(xiě)出下面不好的代碼：

var component = ;
component.props.foo = x; // bad
component.props.bar = y; // also bad

這樣寫(xiě)是錯(cuò)誤的，因?yàn)槲覀兪謩?dòng)直接添加的屬性React后續(xù)沒(méi)辦法檢查到屬性類型錯(cuò)誤，也就是說(shuō)，當(dāng)我們手動(dòng)添加的屬性發(fā)生類型錯(cuò)誤時(shí)，在控制臺(tái)是看不到錯(cuò)誤信息的。

在React的設(shè)定中，初始化完props后，props是不可變的。改變props會(huì)引起無(wú)法想象的后果。

為了解決這個(gè)問(wèn)題，React引入了屬性延伸

var props = {};
props.foo = x;
props.bar = y;
var component = ;

當(dāng)需要拓展我們的屬性的時(shí)候，定義個(gè)一個(gè)屬性對(duì)象，并通過(guò){...props}的方式引入，React會(huì)幫我們拷貝到組件的props屬性中。重要的是—這個(gè)過(guò)程是由React操控的，不是手動(dòng)添賦值的屬性。

需要覆蓋的時(shí)候可以這樣寫(xiě)：

var props = { foo: "default" };
var component = ;

在React中寫(xiě)行內(nèi)樣式時(shí)，要這樣寫(xiě)，不能采用引號(hào)的書(shū)寫(xiě)方式

React.render(
    

        xxxxx
    
,
    document.body
);

比如我們有一些內(nèi)容是用戶輸入的富文本，從后臺(tái)取到數(shù)據(jù)后展示在頁(yè)面上，希望展示相應(yīng)的樣式

var content="content";

React.render(
    
{content}
,
    document.body
);

結(jié)果頁(yè)面直接輸出內(nèi)容了：

React默認(rèn)會(huì)進(jìn)行HTML的轉(zhuǎn)義，避免XSS攻擊，如果要不轉(zhuǎn)義，可以這么寫(xiě)：

var content="content";    

React.render(
    
,
    document.body
);

頁(yè)面效果：

如果在編寫(xiě)React過(guò)程中使用了自定義屬性，React不會(huì)渲染的

React.render(
    
content
,
    document.body
);

要想使用得這么寫(xiě)：

React.render(
    
content
,
    document.body
);