02. react 初次見面---JSX簡介

一、JSX簡介

咱們來觀察一下聲明的這個變量：

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

這種看起來可能有些奇怪的標籤語法既不是字符串也不是HTML.

它被稱爲 JSX, 一種 JavaScript 的語法擴展。 咱們推薦在 React 中使用 JSX 來描述用戶界面。JSX 乍看起來可能比較像是模版語言，但事實上它徹底是在 JavaScript 內部實現的。

JSX 用來聲明 React 當中的元素。在下一個章節裏面咱們會詳細介紹元素是如何被渲染出來的，接下來呢，咱們先來看看 JSX 的基本使用方法。

二、在 JSX 中使用表達式

你能夠任意地在 JSX 當中使用 JavaScript 表達式，在 JSX 當中的表達式要包含在大括號裏。

例如 2 + 2, user.firstName, 以及 formatName(user) 都是可使用的。

//js方法
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')
);

在 CodePen 上試試。

咱們書寫 JSX 的時候通常都會帶上換行和縮進，這樣能夠加強代碼的可讀性。與此同時，咱們一樣推薦在 JSX 代碼的外面擴上一個小括號，這樣能夠防止 分號自動插入 的bug.

三、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 嵌套

若是 JSX 標籤是閉合式的，那麼你須要在結尾處用 />, 就好像 XML/HTML 同樣：

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

JSX 標籤一樣能夠相互嵌套：

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

警告:

由於 JSX 的特性更接近 JavaScript 而不是 HTML , 因此 React DOM 使用 camelCase 小駝峯命名 來定義屬性的名稱，而不是使用 HTML 的屬性名稱。

例如，class 變成了 className，而 tabindex 則對應着 tabIndex.

六、JSX 防注入攻擊

你能夠放心地在 JSX 當中使用用戶輸入：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染以前默認會 過濾 全部傳入的值。它能夠確保你的應用不會被注入攻擊。全部的內容在渲染以前都被轉換成了字符串。這樣能夠有效地防止 XSS(跨站腳本) 攻擊。

七、JSX 表明 Objects

Babel 轉譯器會把 JSX 轉換成一個名爲 React.createElement() 的方法調用。

下面兩種代碼的做用是徹底相同的：

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

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

React.createElement() 這個方法首先會進行一些避免bug的檢查，以後會返回一個相似下面例子的對象：

// 注意: 如下示例是簡化過的（不表明在 React 源碼中是這樣）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

這樣的對象被稱爲 「React 元素」。它表明全部你在屏幕上看到的東西。React 經過讀取這些對象來構建 DOM 並保持數據內容一致。

咱們將在下一個章節當中介紹更多有關 React 元素 是如何渲染成 DOM 的內容。