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  · 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屬性，可以提升效能