react怎么創建元素

這篇文章主要介紹“react怎么創建元素”，在日常操作中，相信很多人在react怎么創建元素問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react怎么創建元素”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

react創建元素的方法：1、使用JSX語法創建React元素，其語法如“const element = <h2>Hello, world</h2>;”；2、通過“React.createElement(type,props,children)”語法創建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 = <h2 className='greeting'>Hello, world</h2>;

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

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

最終，element 的值會被編譯為類似下面的 js 對象

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

創建 React 元素的方法

1.使用 JSX 語法

const element = <h2>Hello, world</h2>;

2.React.createElement(type,props,children)

語法參數說明

type：表示元素的類型，比如：h2、div、p等等。可以是

• 字符串（如div、p、h2…）

• 組件（自定義組件：構造函數創建的組件或class創建的組件；react 原生組件：React.Fragment等）

props：表示該元素上的屬性，使用 JavaScript 對象的方式表示

children：表示該元素內部的內容，可以是文字，也可以繼續嵌套另一個React.createElement(type,props,children)。

其中 children 可以是一個 React.createElement 列表,也可以寫成多個參數：

  <script type="text/babel">
    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怎么創建元素”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！