（一）JSX是什麽?

React 使用 JSX 來替代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

我們不需要一定使用 JSX，但它有以下優點：

• • JSX 執行更快，因為它在編譯為 JavaScript 代碼後進行了優化。
  • 它是類型安全的，在編譯過程中就能發現錯誤。
  • 使用 JSX 編寫模板更加簡單快速。

（二）使用 JSX

（1）註釋寫法

{/* 哈哈哈，你好 */}

　　（2）添加自定義屬性

　　　　 需要使用 data- 前綴。

<p data-myattribute = "hhhh">這是一個很不錯的 JavaScript 庫!</p>

（3）JSX 中不能使用 if else 語句，但是可以使用三元表達式

表達式寫在花括號 {} 中

<p className="App-intro">{userName == ‘‘ ? ‘用戶沒有登錄‘ : ‘用戶名:‘ + userName}</p>

（4）React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px

var myStyle = {
    fontSize: 100,
    color: ‘#FF0000‘
};
ReactDOM.render(
    <h1 style = {myStyle}>哈哈哈</h1>,
    document.getElementById(‘example‘)
);
 

（5）屬性綁定

<p><input type="button" value={userName} disabled={boolInput} /></p>

（6）JSX 允許在模板中插入數組，數組會自動展開所有成員

var arr = [
  <h1>菜鳥教程</h1>,
  <h2>學的不僅是技術，更是夢想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(‘example‘)
);

（7）html展示

　　a：通過Unicode轉碼

　　b：通過 dangerouslySetInnerHTML 設置 html

　　　（此方法可能會存在 XSS 攻擊）

<p dangerouslySetInnerHTML = {{__html:html}}></p>

React（三）JSX內置表達式