React之JSX語法

1. JSX的介紹

  JSX(JavaScript XML)——一種在React組件內部構建標籤的類XML語法。react在不使用JSX的狀況下同樣能夠工做，然而使用JSX能夠提升組件的可讀性，所以推薦使用JSX。

1. 基於ECMAScript的一種新特性
2. 一種定義帶屬性樹結構的語法

  JSX的特性：

  它具有如下好處：

1. 更加熟悉
2. 更加語義化
3. 更加直觀
4. 抽象化
5. 關注分離點

---

2.JSX的使用

1. React對大小寫敏感，若是是自定義組件，則必須首字母大寫，若是是DOM自帶的標籤，則要小寫（好比div p span等），不然可能出錯，這也是一種規範。
2. 嵌套
3. 求值表達式。（可使用表達式，例如’>’，’<’，三目表達式等，可是函數沒法使用，例如if……else）
4. 駝峯命名
5. htmlFor className

爲組件使用css樣式：

JSX語法只支持求值表達式，不支持函數，這裏有四種條件判斷的寫法：

1. 三目運算符 
   

2. 使用變量，並在屬性中引用 
   

3. 直接調用函數，講邏輯轉化到函數中 
   

4. 比較運算符(|| &&) 
   

  還有一種萬能函數表達式： 
  

3.非DOM屬性

JSX中引入了三個非DOM屬性：dangerouslySetInnerHTML、ref、key

1.dangerouslySetInnerHTML

function createMarkup() { return {__html: 'First &middot; 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屬性，能夠提高性能

---

 

引用原文：http://blog.csdn.net/deeplies/article/details/52641073

 

寫博客是爲了記住本身容易忘記的東西，另外也是對本身工做的總結，文章能夠轉載，無需版權。但願盡本身的努力，作到更好，你們一塊兒努力進步！

若是有什麼問題，歡迎你們一塊兒探討，代碼若有問題，歡迎各位大神指正！