React學習筆記—JSX

深刻JSX

JSX能夠看做JavaScript的拓展，看起來有點像XML。使用React，能夠進行JSX語法到JavaScript的轉換。

Why JSX?

使用React，不必定非要使用JSX語法，可使用原生的JS進行開發。可是React做者強烈建議咱們使用JSX，由於JSX在定義相似HTML這種樹形結構時，十分的簡單明瞭。簡明的代碼結構更利於開發和維護。
XML有着開閉標籤，在構建複雜的樹形結構時，比函數調用和對象字面量更易讀。看個直接的對比：

#使用JSX
React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);

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

JSX並非新語言，也沒有改變JavaScript的語法，只是對JavaScript的拓展。

HTML 標籤 vs. React 組件

React.render方法能夠渲染HTML結構，也能夠渲染React組件。
渲染HTML標籤，聲明變量採用首字母小寫

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

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

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

經過變量的聲明，來區分HTML標籤和React組件，這個能夠看做一個約定吧。

注意：標籤的屬性class和for，須要寫成className和htmlFor。由於兩個屬性是JavaScript的保留字和關鍵字。不管你是否使用JSX。

#使用JSX
React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById('example')
);

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

轉化

React JSX將相似XML的語法轉化到原生的JavaScript，元素的標籤、屬性和子元素都會被看成參數傳給React.createElement函數：

#JSX
var Nav;
var app = <Nav color="blue" />;

#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});

JS表達式

表達式用{}包起來，不要加引號，加引號就會被當成字符串。

JSX是HTML和JavaScript混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

屬性表達式

React.render(
    <div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
    document.body
);

子表達式

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

React.render(
    <div>
        {2 > 1 ? <Nav/> : <div>div</div>}
    </div>,
    document.body
);

註釋

同JavaScript註釋同樣

• 單行註釋 // comments
• 多行註釋 /* comments */

JSX延伸屬性

不要改變props

若是提早就知道了組件的屬性的話，寫起來很容易。例如component組件有兩個動態的屬性foo和bar：

var component = <Component foo={x} bar={y} />;

而實際上，有些屬性多是後續添加的，咱們沒辦法一開始就肯定，咱們可能會寫出下面很差的代碼：

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

這樣寫是錯誤的，由於咱們手動直接添加的屬性React後續沒辦法檢查到屬性類型錯誤，也就是說，當咱們手動添加的屬性發生類型錯誤時，在控制檯是看不到錯誤信息的。

在React的設定中，初始化完props後，props是不可變的。改變props會引發沒法想象的後果。

延伸屬性

爲了解決這個問題，React引入了屬性延伸

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

當須要拓展咱們的屬性的時候，定義個一個屬性對象，並經過{...props}的方式引入，React會幫咱們拷貝到組件的props屬性中。重要的是—這個過程是由React操控的，不是手動添賦值的屬性。

須要覆蓋的時候能夠這樣寫：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;

JSX 陷阱

style屬性

在React中寫行內樣式時，要這樣寫，不能採用引號的書寫方式

React.render(
    <div style={{color:'red'}}>
        xxxxx
    </div>,
    document.body
);

HTML轉義

好比咱們有一些內容是用戶輸入的富文本，從後臺取到數據後展現在頁面上，但願展現相應的樣式

var content='<strong>content</strong>';

React.render(
    <div>{content}</div>,
    document.body
);

結果頁面直接輸出內容了：

React默認會進行HTML的轉義，避免XSS攻擊，若是要不轉義，能夠這麼寫：

var content='<strong>content</strong>';    

React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

頁面效果：

自定義HTML屬性

若是在編寫React過程當中使用了自定義屬性，React不會渲染的

React.render(
    <div dd='xxx'>content</div>,
    document.body
);

要想使用得這麼寫：

React.render(
    <div data-dd='xxx' aria-dd='xxx'>content</div>,
    document.body
);