React之JSX語法
1. JSX的介紹
JSX(JavaScript XML)——一種在React元件內部構建標籤的類XML語法。React在不使用JSX的情況下一樣可以工作,然而使用JSX可以提高元件的可讀性,因此推薦使用JSX。
- 基於ECMAScript的一種新特性
- 一種定義帶屬性樹結構的語法
JSX的特性:
它具備以下好處:
- 更加熟悉
- 更加語義化
- 更加直觀
- 抽象化
- 關注分離點
2.JSX的使用
- React對大小寫敏感,如果是自定義元件,則必須首字母大寫,如果是DOM自帶的標籤,則要小寫(比如div p span等),否則可能出錯,這也是一種規範。
- 巢狀
- 求值表示式。(可以使用表示式,例如’>’,’<’,三目表示式等,但是函式無法使用,例如if……else)
- 駝峰命名
- htmlFor className
為元件使用css樣式:
JSX語法只支援求值表示式,不支援函式,這裡有四種條件判斷的寫法:
三目運算子
使用變數,並在屬性中引用
直接呼叫函式,講邏輯轉化到函式中
比較運算子(|| &&)
還有一種萬能函式表示式:
3.非DOM屬性
JSX中引入了三個非DOM屬性:dangerouslySetInnerHTML、ref、key
1.dangerouslySetInnerHTML
function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
在JSX中直接插入HTML程式碼。
會被增加被跨站攻擊的可能(XSS)
用例:
如果是這樣:
<div id="demo"></div>
<script type="text/babel">
var Test = React.createClass({
getInitialState: function () {
return {html: '我想讓它換行顯示<br />,我想讓它換行顯示<br />'};
},
render: function() {
return (
<div>{this.state.html}</div>
);
}
});
ReactDOM.render(
<Test />,
document.getElementById('demo')
);
</script>
瀏覽器將會顯示:
我們可以看到,React並沒有幫我們將<br>
標籤,解析成html,而是直接當成字串處理,這是為了安全考慮,避免XSS攻擊。
而如果我們已經確保語句安全,並且想要實現將<br>
標籤出來,則就需要dangerouslySetInnerHTML
:
<div id="demo1"></div>
<script type="text/babel">
var rawHTML={
__html:"我想讓它換行顯示<br />,我想讓它換行顯示<br />"
};
ReactDOM.render(
<div dangerouslySetInnerHTML={rawHTML}></div>,
document.getElementById('demo1')
);
</script>
瀏覽器將會顯示:
我們可以看到,這裡已經是換行了,也就是說React已經將<br>
標籤解析成了我們想要的html。
2.ref
元件並不是真實的 DOM 節點,而是存在於記憶體之中的一種資料結構,叫做虛擬 DOM (virtual DOM)。只有當它插入文件以後,才會變成真實的 DOM 。根據 React 的設計,所有的 DOM 變動,都先在虛擬 DOM 上發生,然後再將實際發生變動的部分,反映在真實 DOM上,這種演算法叫做 DOM diff ,它可以極大提高網頁的效能表現。
但是,有時需要從元件獲取真實 DOM 的節點,這時就要用到 ref 屬性。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
3.key
<div id="demo3"></div>
<script type="text/babel">
var UseKey=React.createClass({
render:function(){
return <ul>
<li key="1">a</li>
<li key="2">b</li>
<li key="3">c</li>
</ul>
}
});
ReactDOM.render(
<UseKey />,
document.getElementById('demo3')
);
</script>
瀏覽器顯示:
注意:同一個元件之內,不能出現相同的key,列表之類的元件,最好加上key屬性,可以提升效能