react element什麼意思

react element是「React.createElement」函數的回傳值，即ReactElement；ReactElement的結構是「const element = {Element    $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props, _owner: owner, };」。

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

react element什麼意思？

React原始碼| ReactElement

說到ReactElement，不得不提的就是在React中，用來取代JavaScript（JS）的語言，JSX 。

JSX

作為React的官方指定語法，JSX允許使用者在JS程式碼中插入HTML程式碼。但是，這種寫法瀏覽器是無法解析的。他們需要一個轉換器，Babel就充當了這樣一個角色，他在JSX程式碼編譯時候將其轉換成JS文件，這樣瀏覽器就能解析了。

怎麼轉換呢，我們知道，JSX有JS和HTMl兩種寫法，本身就是JS寫法的其實是不需要轉換的，當然也不能說的這麼絕對，有時候Babel會為了兼容性的緣故將高版本的語法翻譯到低版本，這部分不在討論範圍。我們要關注的其實是HTMl的處理方式。

例如下面這行程式碼：

<div id=&#39;name&#39;>Tom and Jerry</div>

透過Babel轉換後產生的程式碼是：

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

HTML語法轉變成了JS文法，簡單來說，我們寫的JSX最後變成了JS。

我們寫一個複雜點的範例：

<div class=&#39;wrapper&#39; id=&#39;id_wrapper&#39;>
    <span>Tom</span>
    <span>Jerry</span></div>React.createElement("div", {
    class: "wrapper",
    id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

轉換規則是比較簡單的，React.createElement的第一個參數是節點類型；第二個參數是該節點的屬性，以key：value的形式作為一個對象，後面的所有參數都是該節點的子節點。

要注意的是，在JSX語法中，我們不僅有原生的HTML節點，還有大量的自訂元件，例如：

function Comp() {
    return '<div>Tom and Jerry</div>'
}

<Comp></Comp>
function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

可以看出，React.createElement的第一個參數變成了一個變量，而不是一個字串，嘗試將函數Comp首字母小寫：

function comp() {
    return '<div>Tom and Jerry</div>'
}

<comp></comp>
function comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement("comp", null);

React.createElement的第一個參數又變成了一個字串。
這也就是我們在React中寫入元件的時候，為什麼會要求首字母大寫的原因，Babel在編譯的時候會將首字母小寫的元件視為原生的HTMl節點進行處理，如果我們將自訂組件首字母小寫，後續的程式將無法辨識這個組件，最終會報錯。

ReactElement

透過Babel編譯後的JS程式碼，頻繁出現React.createElement這個函數。這個函數的回傳值就是ReactElement，透過上面的範例可以看出，React.createElement函數的入參有三個，或者說三類。

• type  
  type指涉這個ReactElement的型別。
  

• 字串例如div，p代表原生DOM，稱為HostComponent

• Class型別是我們繼承自Component或PureComponent的元件，稱為ClassComponent

• 方法就是functional Component

• ##原生提供的Fragment、AsyncMode等是Symbol，會被特殊處理

• #config  

  參考上面Babel編譯後的程式碼，所有節點的屬性都會以Key:Value的形式放到config物件中。
  
  

• children

  子節點不只會有一個，所以children不只有一個，從第二個參數以後的所有參數都是children，它是一個陣列。
  
  

const element = {
    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.    _owner: owner,
  };

<div class=&#39;class_name&#39; id=&#39;id_name&#39; key=&#39;key_name&#39; ref=&#39;ref_name&#39;>
    <span>Tom</span>
    <span>Jerry</span>
</div>

React.createElement("div", {
    class: "class_name",
    id: "id_name",
    key: "key_name",
    ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

{
    $$typeof: REACT_ELEMENT_TYPE,
    type：'div'，
    key: 'key_name',
    ref: "ref_name",
    props: {
        class: "class_name",
        id: "id_name",
        children: [
            React.createElement("span", null, "Tom"),
            React.createElement("span", null, "Jerry")
        ]
    }
     _owner: ReactCurrentOwner.current,}

以上是react element什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！