關於 JSX

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

    它被稱爲JSX，它是JavaScript的語法擴展。咱們建議使用它與React來描述UI應該是什麼樣子。JSX能夠提醒你一個模板語言，但它伴隨着JavaScript的所有力量。

 在JSX中嵌入表達式

    您能夠在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拆分爲多行以提升可讀性。雖然不是必需的，但當執行此操做時，咱們還建議將其括在括號中，以免自動分號插入的陷阱。

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

    在屬性中嵌入JavaScript表達式時，不要在大括號中引號。不然JSX會將該屬性視爲字符串文字而不是表達式。您應該使用引號（對於字符串值）或花括號（對於表達式），但不能在同一屬性中。

使用JSX指定子項

    若是標記爲空，您能夠當即關閉它/>，如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成爲className在JSX，和tabindex成爲tabIndex.

 

JSX防止注入攻擊

   在JSX中嵌入用戶輸入是安全的：

 

const title = response.potentiallyMaliciousInput;
// This is safe:
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() 執行一些檢查，以幫助你編寫無錯誤的代碼，但本質上它建立一個對象像這樣：

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

    這些對象稱爲「React元素」。你能夠把它們想象成你想在屏幕上看到的內容。React讀取這些對象，並使用它們構造DOM並保持其爲最新。