htm sna 容易 普通 約定 html 標簽 更新 進行 javascrip

一、定義 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‘ 
    }
};
 

二、JSX指定屬性值 1、使用字符串

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

2、花括號嵌入js表達式

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

3、 自定義屬性 data-abc 三、行內樣式

style={ {color: "red"} }

四、渲染元素 不同於瀏覽器的 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 所需的狀態。

　　

React學習—認識JSX