【React整理系列】JSX語法學習

這是對官方文檔的所涉及概念的補充，更多具體概念描述還請移步官方文檔-JSX簡介

JSX語法學習：

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

JSX:既不是字符串也不是 HTML,是一個 JavaScript 的語法擴展。具有 JavaScript 的全部功能。這裏需要注意的是：JSX自身也是一個表達式 ！！！

a. 在JSX中中使用變量：

如果需要在JSX中使用變量，則需要使用{}單個大括號對其表達式進行相應的包裹：

比如我們需要打印某個變量，則需要使用 **{ 變量名 }**的形式

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

b. 在JSX中使用JavaScript表達式（帶返回值的函數/計算表達式等）

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

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

c. 使用括號包裹JSX語法（官方建議）

目的：避免分號陷阱（面試常問點：考察對JavaScript語法陷阱的理解）

我們會將 JSX 拆分爲多行。同時，我們建議將內容包裹在括號中，雖然這樣做不是強制要求的，但是這可以避免遇到陷阱

關於一些JavaScript陷阱，有這樣一篇非常優秀的博客（不只是這一個陷阱）鏈接

其中自動插入分號陷阱，這篇博客是這樣描述的：

在語句結束時，你不必手動輸入分號，換行即可。
function foo() {
 var bar = "value"
 return bar
}

// `{}` 包圍的語句塊的最後一個語句的分號也可省略
function bar() { return "foo" }
開發者們每寫一行代碼，就可以少敲打一次鍵盤，這看起來很人性化。但過於依賴分號自動插入，會帶來一些潛在問題。
function foo() {
 return
 {
     bar: 1
 }
}

function bar() {
 var a, b, c, d, e
 a = b + c
 (d + e).toString()
}
看看上面的代碼，foo() 將返回什麼？ bar() 又將怎麼運行？

事實上，前者將返回 undefined ，而後者的後兩行代碼將被理解爲 a = b + c(d + e).toString() 。

JavaScript 的分號自動插入的規則並不那麼清晰可辨，老實地多敲幾次鍵盤，可以避免那些讓你摸不着頭緒的bug在某一天突然出現。

d.在JSX中使用特定屬性

既然用到了類似html的標籤，那麼肯定要爲它指定html中的重要屬性。

其中有一個很重要的知識點：

我們爲元素指定class的時候，由於class與JavaScript中的class關鍵字重複，會影響到JavaScript對JSX語法的編譯，所以，我們必須使用className來爲html元素指定class屬性。如：

    const element = (
        <h1 tabIndex="DD" className="red">hello,ax xgp</h1>
    );

我們可以查看到渲染結果：

可見已經成功將屬性進行了綁定。

e. 在JSX中，指定自定義屬性的方法：

我們偶爾需要在html元素中指定我們自定義的相關屬性，那麼這時候我們就需要使用上面類似的做法，如：

 const element = (
        <h1 tabIndex="DD" className="red" selfattribution="self">hello,ax xgp</h1>
    );
    ReactDOM.render(element, document.getElementById("app"))

要注意，react對於自定義的屬性，由於React 內部識別機制，最好全部使用小寫格式，否則會出現如下所示的警告：

React無法識別 DOM 元素上的"selfAttribution"插槽。如果您有意希望它作爲自定義屬性出現在 DOM 中，請將其拼寫爲小寫"selfattribution"。如果不小心將其從父組件傳遞，請將其從 DOM 元素中刪除。

f.通過JSX指定子元素

其實也就是說我們可以類似用html的語法來對JSX進行描述，也就是可以嵌套使用html標籤，同時與Vue相同，使用這種方式，必須有一個父元素（“子元素”定義就是這麼來的）:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
ReactDOM.render(element, document.getElementById("app"))

g.JSX內部默認防止XSS攻擊

由於React DOM在渲染所有輸入內容之前，默認會進行轉義，所有的內容在渲染之前都被轉換成了字符串，所以可以有效防止XSS攻擊。

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

h. JSX無法直接表示對象

JSX中，如果直接將對象進行渲染，會報錯：

//錯誤代碼
const user = {
        firstName: 'ax',
        lastName: 'xgp'
    }
//下面的JSX中{user}這種寫法是錯誤的
    const element = (
        <h1 tabIndex="DD" className="red" selfAttribution="self">hello,{ user}</h1>
    );
    ReactDOM.render(element, document.getElementById("app"))

報錯信息如下：

想要進行對象的打印，必須進行toString()將其轉換爲字符串（但是一般也沒有這種應用場景）：

<h1 tabIndex="DD" className="red" selfAttribution="self">hello,{ user.toString()}</h1>

打印結果也不同於Vue的處理：

總之就是：別用，通過循環將其轉爲數組，而數組打印見下文。

i.React通過數組進行列表渲染

列表渲染的應用場景很常見，在React中，通常用JSX數組來表示這個列表：

	let arrayShow = []
    for (let item = 0; item < 5; item++) {
        let tempJSX = <li className="red">{item}</li>
        arrayShow.push(tempJSX);
    }
    const element = (
        <div>
            <ul>
                {arrayShow}
            </ul>
        </div>
    );
    ReactDOM.render(element, document.getElementById("app"))

渲染結果：

檢查元素：

【React整理系列】JSX語法學習