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

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

使用React，不一定非要使用JSX語法，可以使用原生的JS進(jìn)行開發(fā)。但是React作者強(qiáng)烈建議我們使用JSX，因?yàn)镴SX在定義類似HTML這種樹形結(jié)構(gòu)時(shí)，十分的簡單明了。簡明的代碼結(jié)構(gòu)更利于開發(fā)和維護(hù)。
XML有著開閉標(biāo)簽，在構(gòu)建復(fù)雜的樹形結(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并不是新語言，也沒有改變JavaScript的語法，只是對(duì)JavaScript的拓展。

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

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

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

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

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

  
注意：標(biāo)簽的屬性class和for，需要寫成className和htmlFor。因?yàn)閮蓚€(gè)屬性是JavaScript的保留字和關(guān)鍵字。無論你是否使用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的語法轉(zhuǎn)化到原生的JavaScript，元素的標(biāo)簽、屬性和子元素都會(huì)被當(dāng)作參數(shù)傳給React.createElement函數(shù)：

#JSX
var Nav;
var app = 

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

JSX是HTML和JavaScript混寫的語法，當(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 */

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

var component = ;

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

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

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

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

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

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

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

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

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

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

React.render(
    

        xxxxx
    
,
    document.body
);

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

var content="content";

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

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

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

var content="content";    

React.render(
    
,
    document.body
);

頁面效果：

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

React.render(
    
content
,
    document.body
);

要想使用得這么寫：

React.render(
    
content
,
    document.body
);