React學習—認識JSX

1、定義

      JSX ，他是 JavaScrip 的一種擴展語法。表示對象

const element = ( 
    <div>
        <h1>Hello!</h1> 
        <h2>Good to see you here.</h2>
    </div>
);
// 咱們將JSX分割成多行。咱們推薦使用括號將 JSX 包裹起來
// JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。
// 只有一個頂層標籤
// 標籤閉合

       Babel 將JSX編譯成 React.createElement() 調用

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

      基本上它會建立一個以下所示的對象：

// 注意: 這是簡化的結構
const element = { 
    type: 'h1',
    props: { 
        className: 'greeting',
        children: 'Hello, world' 
    }
};

2、JSX指定屬性值

       一、使用字符串  

const ele = <div tabIndex = "0"></div>
//  使用駝峯屬性名約定，而不是html屬性名稱。class => className tabindex => tabIndex

       二、花括號嵌入js表達式

const ele = <div tabIndex = {user.url}></div>

      三、 自定義屬性 data-abc

3、行內樣式

style={ {color: "red"} }

4、渲染元素

      不一樣於瀏覽器的 DOM 元素， React 元素是普通的對象，很是容易建立。React DOM 會負責更新 DOM ，以匹配React元素（愚人碼頭注：DOM元素與React元素保持一致）。元素是構成組件的"材料"。

function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
 }
 
 const element = <Welcome name="Sara" />;
 
 ReactDOM.render(
      element,
      document.getElementById('root')
 );//  React DOM 會將元素及其子元素與以前版本逐一對比, 並只對有必要更新的 DOM 進行更新, 以達到 DOM 所需的狀態。