JSX是一個 JavaScript 的語法擴展，JSX 可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式

為什么使用 JSX

React 認為渲染邏輯本質(zhì)上與其他 UI 邏輯內(nèi)在耦合，比如，在 UI 中需要綁定處理事件、在某些時刻狀態(tài)發(fā)生變化時需要通知到 UI，以及需要在 UI 中展示準備好的數(shù)據(jù)。

React 并沒有采用將標記與邏輯進行分離到不同文件這種人為地分離方式，而是通過將二者共同存放在稱之為“組件”的松散耦合單元之中，來實現(xiàn)[關(guān)注點分離]

優(yōu)點：

1、JSX執(zhí)行更快，編譯為JavaScript代碼時進行優(yōu)化
2、類型更安全，編譯過程如果出錯就不能編譯，及時發(fā)現(xiàn)錯誤
3、JSX編寫模板更加簡單快速。（不要跟VUE比）

注意：
1、JSX必須要有根節(jié)點。
2、正常的普通HTML元素要小寫。如果是大寫，默認認為是組件。

JSX表達式

1、由HTML元素構(gòu)成
2、中間如果需要插入變量用{}
3、{}中間可以使用表達式
4、{}中間表達式中可以使用JSX對象
5、屬性和html內(nèi)容一樣都是用{}來插入內(nèi)容

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'

let time = new Date().toLocaleTimeString()
let str = '當(dāng)前時間是：'
let element = (
    <div>
        <h1>helloworld</h1>
        // 在 JSX 中嵌入表達式
        <h2>{str+time}</h2>
    </div>
)

console.log(element)
let man = '發(fā)熱';
let element2 = (
    <div>
        <h1>今天是否隔離</h1>
        <h2>{man=="發(fā)熱"?<button>隔離</button>:"躺床上"}</h2>
    </div>
)

//let man = '發(fā)熱';
let element4 = (
    <div>
        <span>橫著躺</span>
        <span>豎著躺</span>
    </div>
)
man = '正常'
let element3 = (
    <div>
        <h1>今天是否隔離</h1>
        // 三元表達式
        <h2>{man=="發(fā)熱"?<button>隔離</button>:element4}</h2>
    </div>
)

let color = 'bgRed'
let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的樣式類名要寫className,因為class在js當(dāng)中是關(guān)鍵詞
let element5 = (
    <div className={color}>
        <img src={logo} />
        紅色的背景顏色
    </div>

)

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

)

JSX 也是一個表達式

在編譯之后，JSX 表達式會被轉(zhuǎn)為普通 JavaScript 函數(shù)調(diào)用，并且對其取值后得到 JavaScript 對象。

也就是說，你可以在 if 語句和 for 循環(huán)的代碼塊中使用 JSX，將 JSX 賦值給變量，把 JSX 當(dāng)作參數(shù)傳入，以及從函數(shù)中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

JSX 特定屬性

你可以通過使用引號，來將屬性值指定為字符串字面量:

const element = <div tabIndex="0"></div>;

也可以使用大括號，來在屬性值中插入一個 JavaScript 表達式：

const element = <img src={user.avatarUrl}></img>;

在屬性中嵌入 JavaScript 表達式時，不要在大括號外面加上引號。你應(yīng)該僅使用引號（對于字符串值）或大括號（對于表達式）中的一個，對于同一屬性不能同時使用這兩種符號。

因為 JSX 語法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小駝峰命名）來定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定。

例如，JSX 里的 class 變成了 className，而 tabindex 則變?yōu)?[tabIndex]

使用 JSX 指定子元素

假如一個標簽里面沒有內(nèi)容，你可以使用 /> 來閉合標簽，就像 XML 語法一樣：

const element = <img src={user.avatarUrl} />;

JSX 標簽里能夠包含很多子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 防止注入攻擊

你可以安全地在 JSX 當(dāng)中插入用戶輸入內(nèi)容：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有輸入內(nèi)容之前，默認會進行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠不會注入那些并非自己明確編寫的內(nèi)容。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串。這樣可以有效地防止 XSS（cross-site-scripting, 跨站腳本）攻擊。

JSX 表示對象

Babel 會把 JSX 轉(zhuǎn)譯成一個名為 React.createElement() 函數(shù)調(diào)用。

以下兩種示例代碼完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 會預(yù)先執(zhí)行一些檢查，以幫助你編寫無錯代碼，但實際上它創(chuàng)建了一個這樣的對象：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};