react文檔 JSX 簡介

JSX 簡介

變量聲明:

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

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

它被稱爲 JSX, 是一種對 JavaScript 的語法拓展。咱們建議經過 React 使用它來描述 UI。 JSX 可能讓你想起模板語言，可是它擁有 JavaScript 的強大能力。

JSX 產生 React "元素". 下部分咱們探索在 DOM 中渲染他們。如下，在開始前瞭解如下 JSX 的必要性。

Why JSX?

React 信奉渲染邏輯與 UI 邏輯內在耦合：事件怎樣被處理，狀態就隨之改變，數據就如何顯示。

代替經過放置標記和邏輯於分離文件的人工分離技術， React 使用包含二者稱爲 "components" 鬆耦合單元來分離關注點。稍後咱們在以後的部分再回到組件上來，若是你以爲在 JS 中放置標記不舒服，這個對話可能說服你。

React 能夠不用 JSX,但多數人認爲這個在處理 JavaScript 代碼中的 UI 時可讀性更好。也能讓 React 顯示更多有用的錯誤和警告信息。

不提這些，咱們開始！

在 JSX 中嵌入表達式

下面例子中， 咱們聲明瞭一個變量 name ，並經過花括號包裹的方式在 JSX 中使用它。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>

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

JSX 中任何可用的 JavaScript 表達式均可以放在花括號中。 例如， 2 + 2， user.firstName, 或者 formatName(user) 所有都是可用的 JavaScript 表達式。

下面的例子，咱們嵌入調用 JavaScript 函數的結果， formateName(user) 到元素 <h1> 中。

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

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

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

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

在線嘗試

咱們爲了可讀性分開 JSX 到多行。雖然沒有必要，但咱們建議用小括號包起來，避免自動插入分號的陷阱。

JSX 也是一個表達式

編譯以後， JSX 表達式變成常規 JavaScript 函數來調用和求取 JavaScript 對象的值。

這就意味着你能夠在 JSX 中使用 if 聲明和 for 循環，去給它賦值，接受它做爲參數，從函數中返回它。

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 表達式的時候不要用引號包裹花括號。可使用引號，也可使用花括號，可是不要同時使用。

Warning:
因爲 JSX 更接近 JavaScript 而不是 HTML， React DOM 使用 小駝峯 屬性命名慣例而不是 HTML 屬性命名。

指定子節點

若是一個標籤是空的，那麼你能夠像 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 title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>

React DOM 默認在渲染以前避免任何值嵌入到 JSX 中。所以， 你永遠沒法注入任何未明確寫入你應用中的東西。全部的東西都會在渲染前變成字符串。這有利於防止 XSS(跨站腳本）攻擊。

JSX 描繪對象

Bable 編譯 JSX 調用 React.createElement().

下面兩個例子萬全相同：

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',
    childrent: 'Hello, world!'
    }
  };

這些對象被稱爲 "React elements"。 你可想象成一個你想在屏幕上看到的描述。
React 讀取這些對象使用它們構建 DOM 和保持對其更新。

下一部分咱們探討將 React 元素 渲染至 DOM.