深入瞭解JSX

什麼是JSX？

事實上JSX就是React.createElement()方法的語法糖。

JSX的優點：

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

// JSX語法：
<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

// 編譯為：
React.createElement(
    MyButton,
    {color: 'blue', shadowSize: 2},
    'Click Me'
)

// 沒有子代的用法
<div className="sidebar" />

//編譯為:
React.createElement(
    'div',
    {className: 'sidebar'},
    null
)

當元素型別以小寫字母開頭時，它表示一個內建的元件，認為其是原生的HTML標籤，如 <div> ，並將字串 'div' 傳遞給React.createElement。

當元素型別以大寫字母開頭時，會認為它是一個元件，元件名傳遞給React.createElement，並且與定義的該元件相對應。

附：在使用JSX時必須先引入React，因為編譯時需要使用React.createElement(),即：
import React from 'react';
 

元件名稱不允許使用表示式，如果使用先將表示式賦給一個大寫開頭的變數，再使用該變數作為元件名稱。

屬性值型別

1.表示式

if 語句和 for 迴圈在 JavaScript 中不是表示式，因此不能直接在 JSX 中使用。

如何區分表示式和語句：個人認為表示式有返回值，語句沒有返回值。

如下：

<div value={(function(){return 10;})()}></div>
// 編譯
<div value="10"></div>

2.字串常量

// 兩者等價
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
 

3.預設值true

// 兩者等價
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

不建議這樣使用，原因：在編譯時，屬性物件為:
{autocomplete: true}
這與ES6中物件的簡潔表示法不符，ES6中應為:
{autocomplete: autocomplete}
編譯成功是因為它符合HTML的做法。

4.擴充套件屬性props

// 兩者等價
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

使用props的缺點：可能會給子元件傳遞許多不必要的屬性，導致子元件程式碼混亂。
 

子代

子代true、false、null、undefined不渲染

// 下面程式碼等價
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

// 輸出undefined需將其轉為字串
<div>{String(undefined)}</div>