React JSX表達式學習

學習目標

• jsx表達式

• ReactDOM.render

React Jsx 優點

• jsx執行更快，編譯爲JavaScript代碼時進行優化
• 類型更安全，編譯過程中如果出錯就不能編譯，及時發現錯誤（解釋型編譯）。
• JSX編寫模版簡單快捷。

React Jsx 缺點

• JSX必須有根節點(root)
• 正常的普通HTML元素要小寫。如果是大寫，則默認爲組件。

ReactDOM.render 是 React 的最基本方法用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

ReactDOM.render(template,targetDOM) 方法接收兩個參數：

• 第一個是創建的模板，多個 dom 元素外層需使用一個標籤進行包裹，如 <div>；
• 第二個參數是插入該模板的目標位置。

ReactDOM.render 實例一

import React from 'react';
import ReactDOM from 'react-dom';

let element = (
  <div>
    <h1>Hello World.</h1>
    <h2>{1+1}</h2>
  </div>
)

ReactDOM.render(
  element,
  document.getElementById('root')
)

element爲HTML模板，root是HTML文檔的根元素。頁面最終結果如圖所示：

ReactDOM.render 實例二 (字符串拼接：{str+time})

mport React from 'react';
import ReactDOM from 'react-dom';
let time = new Date().toLocaleTimeString();
let str = '當前時間是：'
let element = (
  <div>
    <h1>Hello World.</h1>
    <h2>{str+time}</h2>
  </div>
)
ReactDOM.render(
  element,
  document.getElementById('root')
)

ReactDOM.render 實例三 (字符三元運算符)

import React from 'react';
import ReactDOM from 'react-dom';
let man = '發熱';
let element2 = (
  <div>
    <h1>今天是否隔離</h1>
    <h2>{man = "發熱"?"隔離":"不隔離"}</h2>
  </div>
)
ReactDOM.render(
  element2,
  document.getElementById('root')
)

ReactDOM.render 實例四 (jsx對象（按鈕）)

import React from 'react';
import ReactDOM from 'react-dom';
let man = '發熱';
let element2 = (
  <div>
    <h1>今天是否隔離</h1>
    <h2>{man = "發熱"?<button>隔離</button>:"不隔離"}</h2>
  </div>
)
ReactDOM.render(
  element2,
  document.getElementById('root')
)

JSX表達式小結

• 由html元素構成

• 中間如果需要變量用{}

• {}中間可以使用表達式

• {}中間表達式可以使用JSX對象

• 屬性和html內容一樣都是用{}來插入內容