React JSX

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

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

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

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

我們先看下以下代碼：

const element = <h1>Hello, world!</h1>;

這種看起來可能有些奇怪的標籤語法既不是字串也不是 HTML。

它被稱為 JSX， 一種 JavaScript 的語法擴展。 我們推薦在 React 中使用 JSX 來描述用戶介面。

JSX 是在 JavaScript 內部實現的。

我們知道元素是構成 React 應用的最小單位，JSX 就是用來聲明 React 當中的元素。

與流覽器的 DOM 元素不同，React 當中的元素事實上是普通的對象，React DOM 可以確保 流覽器 DOM 的數據內容與 React 元素保持一致。

要將 React 元素渲染到根 DOM 節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上：

React 實例

var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));

注意:

由於 JSX 就是 JavaScript，一些識別字像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

使用 JSX

JSX 看起來類似 HTML ，我們可以看下實例:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

我們可以在以上代碼中嵌套多個 HTML 標籤，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 首碼。

React 實例

ReactDOM.render( <div> <h1>IT研修</h1> <h2>歡迎學習 React</h2> <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p> </div> , document.getElementById('example') );

獨立檔

你的 React JSX 代碼可以放在一個獨立檔上，例如我們創建一個 helloworld_react.js 檔，代碼如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

然後在 HTML 檔中引入該 JS 檔：

React 實例

<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>

JavaScript 運算式

我們可以在 JSX 中使用 JavaScript 運算式。運算式寫在花括弧 {} 中。實例如下：

React 實例

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example') );

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 運算式來替代。以下實例中如果變數 i 等於 1 流覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

React 實例

ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example') );

樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字後自動添加 px 。以下實例演示了為 h1 元素添加 myStyle 內聯樣式：

React 實例

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

注釋

注釋需要寫在花括弧中，實例如下：

React 實例

ReactDOM.render( <div> <h1>IT研修</h1> {/*注釋...*/} </div>, document.getElementById('example') );

數組

JSX 允許在範本中插入數組，數組會自動展開所有成員：

React 實例

var arr = [ <h1>IT研修</h1>, <h2>鍵盤之下，連接的是無限可能！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );