五分鐘學習React(四)：什麼是JSX

JSX，即javscript XML，是js內定義的一套XML語法。目前是使用babel做爲JSX的編譯器。這也是在前幾期中載入babel的緣由。

Facebook引入JSX是爲了解決前端代碼工程複雜、維護困難等問題。JSX爲咱們提供了一種虛擬DOM的實現方式。 經過使用類XML語法的JSX，定義虛擬的DOM，以減小真實DOM的操做，從而提升運行效率。因爲JSX的使用，在React項目中建立Components變得至關簡單，用戶能夠將程序邏輯（programming logic）和標記語言（markup）混合在一塊兒使用，促進代碼的可讀性、可預測性，有效的提升代碼的維護效率。

接下來咱們講講JSX的基本語法：

1. JSX基本定義

const element = <h1>Hello World!</h1>;
ReactDom.render(
    element,
    document.getElementById('root');
)

從上述代碼，咱們能夠理解JSX的XML語法至關因而一個js的表達式，它能夠直接給變量賦值。（其實不是這樣，真正的理解【看這裏】)

2. JSX內定義表達式

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的內部，咱們能夠執行方法（function），能夠輸入對象。能夠直接輸出字符串變量等.這裏的{}相似於php中<?php ?>的語法。

3. JSX內定義屬性（Attribute）

const element = <div class="div-test"></div>
const element = <div className="div-test"></div>

JSX的屬性定義遵循CamelCase原則。若是定義的是html標籤默認的屬性，則可使用html的規則。上面這例子中，兩行代碼都是用來定義class的屬性。

// 這兩行的代碼效果相同
const element = <div tabIndex="0"></div>;
const element = <div tabindex="0"></div>;

這則例子，定義一個名爲tabindex的屬性名字，在JSX中遵循使用camelCase格式。固然若是不使用也能夠，React依舊能夠執行。

const element = <a href={person.link}> </a>

一樣的,在屬性中也能夠添加變量表達式，用{}來執行。

4. JSX內嵌子標籤

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

在這種狀況下，必須使用（）來表示。同時JSX中，只能有一個根節點。不能兩個節點並列存在，以下：

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

這種狀況，React是沒法編譯成功。

5.總結

1. JSX是一個js內的XML語法，將程序邏輯和標記語言在同一個文件中顯示。用利於代碼開發和維護
2. JSX中，咱們引入了虛擬DOM的概念【看這裏】
3. JSX的基本語法至關靈活，能夠表達式內嵌、定義屬性等