React學習—認識JSX

標籤：簡化   有一個   bsp   tab   代碼塊   html 標籤   文法規則   表示   world   

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