React從入門到精通系列之(2)JSX的介紹

張亞濤發表於2016-12-13
ReactJS

二、JSX的介紹

首先，請考慮下面的變數宣告：

const element = <h1>hello world</h1>;

這個有趣的標籤語法，因為它既不是字串也不是HTML。

它被稱為JSX，它是JavaScript的語法擴充套件。 我們建議使用它和React一起使用，以便描述UI應該是什麼樣子的。JSX或許看上去像是一個模板語言，但是它具有JavaScript的全部能力。

JSX用來生成React元素。 我們將在下一節中探討將它們渲染到DOM。 下面，你可以找到JSX的基礎知識。

JSX中的嵌入表示式

你可以通過將表示式包含在一個大括號裡，以便用來在JSX中嵌入任何JavaScript表示式。
例如，下面程式碼中的 2 + 2，user.name，還有formatName(user)都是可用的表示式：

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

const user = {
    firstName: `yatao`,
    lastName: `zhang`
};

const Element = (
    <h1>
        hello, {formatName(user)}
    </h1>
);

ReactDOM.render(
    Element,
    document.getElementById(`root`)
);

我們將JSX拆分為多行以提高可讀性。 雖然它不是強制性的要求，但當執行此操作時，我們還建議將其括在括號中，以避免自動分號插入而引起不必要的bug。

JSX也是一個表示式

編譯後，JSX表示式會成為常規JavaScript物件。
這意味著您可以在if語句和for迴圈中使用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>;

使用JSX指定子元素

如果標記為空，您可以使用 /> 立即關閉它，例如html：

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

JSX標籤也可以包含子元素：

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

警告
由於JSX比HTML更接近JavaScript，React DOM使用駝峰命名法約定而不是HTML屬性名稱。
例如，class在JSX中變為className，tabindex變為tabIndex。

JSX防止注入攻擊

在JSX中嵌入使用者輸入是安全的：

const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危險內容的字串放入大括號中，這是比較安全的做法
const element = <h1>{title}</h1>;

預設情況下，React DOM在渲染它們之前轉義嵌入在JSX中的任何值。 因此，它確保不能注入那些沒有明確寫在你的應用程式中的任何東西。 在渲染之前，一切都轉換為字串。 這有助於防止XSS（跨站點指令碼）攻擊。

JSX表示物件

Babel將JSX編譯為React.createElement()呼叫。
這兩個例子是相同的：

const element = (
    <h1 className="greeting">
        hello world
    </h1>
);
const element = React.createElement(
    `h1`,
    {className: `greeting`},
    `hello world`
);

React.createElement()會進行一些檢查，以幫助您編寫無明顯語法錯誤的程式碼，本質上，它建立的是一個像這樣的物件：

// 提示：這是一個簡單物件結構
const element = {
   type: `h1`,
   props: {
       className: `greeting`,
       children: `hello, world`
   }
};

這些物件稱為“React元素”。 你可以把它們想象成你想在螢幕上看到的樣子。 React讀取這些物件，並使用它們構造成為DOM元素同時一直保持其為最新的。

相關文章