Introducing JSX（翻譯）

lifesimple發表於2017-08-24
JS

開始學習React從過一遍官網資料開始。

introducting JSX原文 翻譯並不準確，還是看原文好。

JSX介紹

看下面的程式碼

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

這個有趣的連線語法既不是字串也不是HTML。
它稱之為JSX,它是JavaScript的一種語法擴充套件。我們推薦在React中使用它去編寫UI介面的樣子。JSX可能會使你想起模板語言，但是它帶來的是全套的JavaScript功能。

JSX生產React「元素」。在下一節我們將探索渲染React元素到DOM的過程。從下面的例子你能夠學到JSX的基礎知識。

表示式巢狀在JSX中

你可以將JavaScript表示式通過花括號巢狀在JSX中使用。
例如，2+2 user.firstName,以及formatName(user)等都是合法表示式。

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`)
);

當我們書寫多行JSX程式碼時候，為了良好的可讀性，雖不是必須，但還是推薦使用括號包裹避免產生JavaScript分號自動插入的問題。

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會將該表示式作為字串處理。所以，你應該要麼字串加引號使用，要麼花括號中寫表示式，不要兩者同時用。

在JSX中定義Children(?)

如果標籤不閉合，可以通過/>關閉標籤，就像XML

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使用`camelCase`(駝峰命名)屬性命名規定代替HTML屬性名。
例如：`class`在JSX中是`className`，`tabindex`是`tabIndex`。

JSX可以防止注入攻擊（XSS）

通過JSX傳入資料會更安全

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

預設情況，React DOM在渲染JSX之前會排除嵌入的輸入值，因此確保在你的應用中不會注入任何不明確的書面值。任何值在渲染之前都會轉換為字串。這就避免了XSS攻擊。

JSX表現為物件

Babel通過呼叫React.createElement()來編譯JSX
下面兩段程式碼是相同的

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

React.createElement()展現了一些檢查項來幫助你減少程式碼bug，但是本質上老說它建立了這樣的物件

// Note: this structure is simplified
const element = {
  type: `h1`,
  props: {
    className: `greeting`,
    children: `Hello, world`
  }
};

這些物件稱之為「React元素」.你可以把他們當做你想在介面上看到一種描述。React讀取這些物件，然後使用它們去構造DOM元素，並且保持更新。

相關文章