[譯]React核心概念1：JSX簡介

原文連接：reactjs.org/docs/introd…

引言

首先咱們先來看下下面這個變量的聲明

const element=<h1>Hello World!</h1>
複製代碼

這個有趣的語法既不是一個字符串也不是一個HTML標籤。

這種語法被稱爲JSX，是Javascript的一種擴展語法。咱們推薦在React中使用JSX去編寫咱們的UI界面。也許你會以爲JSX很像是模板語言，可是它具備JavaScript的所有功能。

JSX建立了React的元素，在下一節咱們會探討如何將JSX渲染到真是DOM上。接下來，你將學到關於JSX的基礎知識。

爲何要使用JSX

React信奉渲染邏輯與UI邏輯是自然耦合的：如何處理事件，狀態如何隨着時間變化以及數據如何顯示在頁面上。React用被稱爲「組件」的鬆散的耦合單元（同時包含標籤代碼與邏輯代碼）來代替手動地將標籤與代碼邏輯分散在不懂的文件裏。咱們將會在接下來的介紹裏介紹組件。

React不強制要求使用JSX，可是大部分開發者在開發時發現將UI標籤放在JavaScript代碼裏對觀察代碼渲染十分有幫助。固然，使用JSX能在開發時向開發者顯示更多游泳的錯誤和警告信息。

在JSX嵌入表達式

在下面的例子裏，咱們聲明瞭一個name變量而且在JSX中經過一個花括號引用了它。

var name="於一";
var greeting=<h1>Hello {name}</h1>;

ReactDom.render(
    greeting,
    document.getElementById('root')
);
複製代碼

你能夠在JSX中經過花括號引用任何有效的JavaScript表達式。好比2+2，user.firstName或formatName(user)，以上這些都是有效的JavaScript表達式。

在下面的例子裏，咱們在<h1>標籤裏引用了一個JavaScript函數formatName(user)。

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

const user = {
    firstName: 'YUYI',
    lastName: 'WU'
};

const element = (
    <h1>
        Hello,{formatNameuser}!
    </h1>
)

ReactDom.render(
    element,
    document.getElementById('root')
);
複製代碼

爲了便於閱讀，咱們把JSX分紅了幾行，你在編寫代碼時能夠不這樣作。一樣咱們推薦在使用JSX時將他們包裹在圓括號內以防止編譯時被自動插入分號。

JSX也是表達式

在編譯以後，JSX表達式就變成了常規的JavaScript的函數調用而且等價於一個JavaScript對象。

這也就意味着你能夠在if語句和for循環中使用JSX，你也能夠把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表達式做爲屬性時千萬不要把他包裹在引號內，在屬性中你只能使用引號和花括號其中的一個，不能兩個同時使用（不信能夠動手試試）。

注意： 因爲JSX相比於HTML更接近JavaScript，所以ReactDOM使用駝峯命名發來代替傳統的HTML屬性命名。 好比在JSX中，class變成了className，tabindex變成了tabIndex。

爲JSX指定子元素

若是標籤沒有子元素你能夠像使用XML標籤同樣使用/>來結束它。

const element = <img src={user.avatarUrl} />;
複製代碼

JSX標籤中也能夠包含子元素：

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

JSX能夠有效阻止注入攻擊 在JSX中嵌入用戶輸入是安全的：

const tilte=response.pontentiallyMaliciousInput;
const element=<h1>{title}</h1>;
複製代碼

默認地，ReactDOM在渲染以前，會將嵌入到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()會檢查你的代碼，減小bug的出現，但本質上它會將你寫的JSX編譯成下面這樣的一個對象：

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

這些對象被稱爲「React元素」，你能夠把它想象成是對你想要編寫的頁面的描述。React經過使用它們來建立DOM並實時更新。

提示： 咱們推薦在你的編譯器中使用「Babel」語言定義，來顯示高亮的ES6和JSX代碼。