React之JSX文法

標籤：最好   handle   相同   大小寫   ntb   tty   val   必須   .net   

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

 

寫部落格是為了記住自己容易忘記的東西，另外也是對自己工作的總結，文章可以轉載，無需著作權。希望盡自己的努力，做到更好，大家一起努力進步！

如果有什麼問題，歡迎大家一起探討，代碼如有問題，歡迎各位大神指正！

React之JSX文法