005-JSX簡介以及使用

1、概述

考慮這個變量聲明：　　

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

標籤語法既不是字符串也不是HTML。

它被稱爲JSX，它是JavaScript的語法擴展。咱們建議在React中使用它來描述UI的外觀。JSX是一種模板語言，但它具備JavaScript的所有功能。

JSX生成React「elements」

1.一、爲何選擇JSX

React擁抱渲染邏輯與其餘UI邏輯固有耦合的事實：事件如何處理，狀態如何隨時間變化以及數據如何準備顯示。

經過將標記和邏輯放入單獨的文件中，React再也不人爲地分離技術，而是將問題與稱爲「組件」的鬆散耦合單元分隔開來。

React不須要使用JSX，可是大多數人在使用JavaScript代碼內的UI時發現它有助於視覺輔助。它還容許React顯示更多有用的錯誤和警告消息。

1.二、在JSX中嵌入表達式

您能夠經過將其包含在大括號中來嵌入JSX中的任何JavaScript表達式。

例如，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分紅多行。建議將其包裝在括號內以免自動分號插入的缺陷。

1.三、JSX也是一個表達式

　　編譯以後，JSX表達式變成常規的JavaScript函數調用並評估爲JavaScript對象。

　　這意味着您能夠在if語句和for循環中使用JSX，將其分配給變量，將其做爲參數接受，並從函數中返回：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

1.四、使用JSX指定屬性

　　可使用引號將字符串文字指定爲屬性：

const element = <div tabIndex="0"></div>;

　　您也可使用大括號將JavaScript表達式嵌入屬性中：

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

　　注：在屬性中嵌入JavaScript表達式時，請勿將大括號括起來。您應該使用引號（用於字符串值）或大括號（用於表達式），但不能同時使用同一個屬性。

　　警告：因爲JSX比HTML更接近JavaScript，所以React DOM使用camelCase屬性命名約定而不是HTML屬性名稱。例如，類在JSX中變爲className，而且tabindex變爲tabIndex。

1.五、JSX可以包含子標籤

若是標籤爲空，則可使用/>當即關閉它，如XML：

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

包含子節點

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

1.六、JSX防止注入攻擊

嵌入輸入是安全的

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

默認狀況下，React DOM在渲染以前轉義嵌入在JSX中的任何值。所以它確保您永遠不會注入任何未明確寫入應用程序的內容。在呈現以前，全部內容都會轉換爲字符串。這有助於防止XSS（跨站點腳本）攻擊。

1.七、JSX表示對象

Babel將JSX編譯爲React.createElement（）調用。

這兩個例子是相同的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement（）會執行一些檢查來幫助您編寫無錯代碼，但本質上它會建立一個以下所示的對象：

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

這些對象被稱爲「React元素」。你能夠把它們想象成你想要在屏幕上看到的東西的描述。 React讀取這些對象並使用它們來構建DOM並使其保持最新狀態。

 

建議使用您所選擇的編輯器的「Babel」語言定義，以便正確突出顯示ES6和JSX代碼。