react創建元素的方法是什麼

react創建元素的方法：1、使用JSX語法創建React元素，其語法如「const element =

Hello, world

;;」；2、透過「React.createElement( type,props,children)」語法建立React元素。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react建立元素的方法是什麼？

建立react 元素

• #React 元素

React 元素（React element）,它是React 中最小的基本單位。 React 元素其實就是一個簡單的 JavaScript 物件（俗稱：虛擬DOM），一個 React 元素對應介面上的一部分 DOM，描述了這部分 DOM 的結構及渲染效果。

React 元素不是真實的 DOM 元素，所以沒辦法直接呼叫 DOM 上的原生 API。

渲染流程：React 元素 說明 虛擬DOM ,再根據 虛擬DOM 渲染出真實的DOM。

虛擬DOM：就是用 js 物件結構模擬出 html 中的 dom 結構，批次的增刪改查先直接操作 js 對象，最後更新到真正的 DOM 樹上。因為直接操作 js 物件的速度比操作 DOM 的那些 api 還要快。

React 元素就是 js 對象，它來告訴 React，你希望哪些東西顯示再頁面中。

總的來說：

元素就是用來描述 DOM 節點或 React 元件的純物件。元素可以在自己的屬性中包含其它元素。創建一個元素的成本很低，一旦元素被創建之後，就不再改變。

例如：我們使用JSX 語法建立一個React 元素element

const element = <h1 id="Hello-world">Hello, world</h1>;

在編譯過程中，JSX 會被編譯成對React.createElement() 的調用，上面的範例編譯後的結果為：

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

最終，element 的值會被編譯成類似下面的js 物件

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

建立React 元素的方法

• #1.使用JSX 語法

const element = <h1 id="Hello-world">Hello, world</h1>;

2.React.createElement(type,props,children)語法參數說明

#type：表示元素的類型，例如：h1、div、p等等。可以是

字串（如div、p、h1…）

#元件（

自訂元件：構造函數建立的元件或class建立的元件；react 原生元件

：React.Fragment等）

props：表示該元素上的屬性，使用JavaScript 物件的方式表示children：表示該元素內部的內容，可以是文字，也可以繼續嵌套另一個

React.createElement(type,props,children)###。 ######其中children 可以是一個###React.createElement 清單###,也可以寫成多個參數：###

  <script>
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

#########React.createElement 傳回實例物件屬性# ##

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

推薦學習：《###react影片教學###》 ####

以上是react創建元素的方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！