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

2、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元素同時一直保持其爲最新的。