React入門-2.JSX介紹

介紹

以下代碼，看上去比較搞笑，既像Javascript的語法，又像HTML，將一個標籤賦值給變量element。這就是JSX，是javascript的擴展語法。咱們推薦在react中使用JSX，使用JSX描述UI。

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

JSX中嵌入表達式

在JSX中，能夠在大括號裏嵌入表達式，與vue中的雙大括號做用相似

<div id="app"></div>
    <script type='text/babel'>
        let name = 'terry';
        let p = {name:'larry',age:12}
        let dom = <h1>hello {name},{1+1},{p.age},{p?'歡迎':'...'}</h1>
        ReactDOM.render(
             dom,document.getElementById('app')
        );
    </script>

在JSX中指定屬性

指定靜態屬性值

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

在大括號中指定動態屬性值

const user = {avatarUrl:'images/a.jpg'};
const element = <img src={user.avatarUrl}></img>;

JSX結構

單標籤，若是沒有結束標籤在開始標籤的中加閉合

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

jsx能夠存在子標籤

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

JSX能夠防止注入攻擊

默認狀況下，React DOM在呈現它們以前轉義JSX中嵌入的任何值。在呈現前，全部內容被轉換爲字符串。

//假設name的值從其餘地方獲取，動態dom
    let name =<h2>terry</h2>;
    let dom = <div> {name}</div>
        ReactDOM.render(
         dom,
      document.getElementById('app')
    );

瀏覽器將會顯示 [object Object]

JSX本質

JSX實際上會被編譯爲一個JS對象

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

等價於

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

咱們把這種對象成爲「React elements」.React讀取這些對象而且使用這些對象構造DOM，保持更新

---

到此，咱們瞭解了JSX基本語法。接下來，咱們學習react的組件