React Component和React Element之間的區別

Question

React Component和React Element之間的區別是什麼？文檔中提到了兩者，但沒有詳細說明，有些方法需要組件，其他元素...

Answer 1

將組件視爲類，將元素視爲實例。而已！

Answer 2

爲了進一步闡述答案，React元素沒有任何方法，原型上也沒有。這也使他們更快。

「A ReactElement是光，無狀態的，不可變的，虛擬一個DOM元素的表示」 - https://facebook.github.io/react/docs/glossary.html#react-elements

阿反應組分render()函數返回幕後反應的元素的DOM樹（這是順便說一句虛擬DOM ）。涉及到一些複雜的映射和差異邏輯，但基本上這些React元素映射到DOM元素。

您也可以直接創建元素React.createElement(arg)其中，arg可以是html標記名稱或React組件類。

Answer 3

反應的元素

一個陣營元素只是一個普通的老JavaScript的Object沒有自己的方法。它基本上具有四個屬性：

• type，一個String表示一個HTML標記或參考指的是陣營元器件
• key，一個String唯一地標識一個陣營元素
• ref，向訪問的參考無論底層DOM節點或陣營組件實例）
• props（屬性Object）

React元素不是React組件的實例。它只是一個關於如何創建React組件實例（或取決於要創建的HTML標籤）的簡化「描述」。

描述React組件的React元素不知道它最終呈現給哪個DOM節點 - 該關聯被抽象並在呈現時被解析。

React元素可能包含子元素，因此能夠形成表示虛擬DOM樹的元素樹。

反應的組分和陣營組件實例

自定義陣營組分是由React.createClass或通過延伸React.Component（ES2015）創建。如果React組件被實例化，它期望propsObject並返回一個實例，該實例被稱爲React組件實例。

React組件可以包含狀態並可以訪問React生命週期方法。它必須至少有一個render方法，該方法在調用時會返回一個React元素（ - 樹）。請注意，您絕不會自己構建React組件實例，而是讓React爲您創建它。

Answer 4

A React Element是你會認爲是一個基本的html（dom是確切的）元素。這只是一種創建元素而不使用很有爭議的jsx格式的方式。

A React Component是你可以考慮作爲一個對象。它有它的方法，支持React lifecycles，通常是不可用的（至少還沒有發現任何重用，歡迎舉例）。它必須有一個渲染功能。

A React Class就是你所說的一類。功能明智的React Class和React Component是相同的。只有語法纔是真正的變化，因爲React Component基於ES6 syntax。另一個主要變化是除非使用箭頭函數，否則不再支持函數的默認綁定。從ES6開始，Mixins也不再支持。

Answer 5

React Element - 這是一個簡單的對象，它描述了一個DOM節點及其屬性或屬性，可以說。它是一個不可變的描述對象，你不能對它應用任何方法。

EG -

<button class="blue"></button> 

React Component - 它是接受輸入，並返回一個陣營元件的功能或類。它必須保持對其DOM節點和子組件實例的引用。

const SignIn =() => (
    <div> 
    <p>Sign In</p> 
    <button>Continue</button> 
    <button color='blue'>Cancel</button> 
    </div> 
); 

Answer 6

有相關的各種事情在這裏參與，用自己的名字：

• 組件
• 組件實例
• 元素

這是稍微奇怪，因爲如果你習慣了其他的UI框架，你就可以希望只有兩種東西，大致對應於類（如Widget）和實例（如new Widget()）。 React並非如此;組件實例是而不是與元素相同，它們之間也沒有一對一的關係。爲了說明這一點，考慮以下代碼：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log('This is a component instance:', this); 
    } 

    render() { 
    const another_element = <div>Hello, World!</div>; 
    console.log('This is also an element:', another_element); 
    return another_element; 
    } 
} 

console.log('This is a component:', MyComponent) 

const element = <MyComponent/>; 

console.log('This is an element:', element); 

ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

在上面的代碼：

• MyComponent（所述類本身）是一個組件
• element是一個元素。它是而不是MyComponent的一個實例;相反，它只是對要創建的組件實例的描述。這是key,props,ref和type屬性的對象。這裏，key和ref是null,props是空對象，並且type是MyComponent。
• 當element被渲染時，實例的MyComponent被創建（並且，在上面的示例中，從其構造函數記錄自身）。
• another_element也是一個元素，並具有key，ref，props和type屬性，就像element做 - 但這次的type值是字符串"div"。

React團隊的博客文章React Components, Elements, and Instances中詳細探討了React具有這三個不同概念的設計原因，我建議閱讀。

最後，應該注意的是，雖然官方文檔嚴格地使用術語「組件」來指代一個函數或類，「組件實例」來指代一個實例，但其他來源並不一定遵守這個術語;在閱讀堆棧溢出答案或討論GitHub時，您應該期望看到「組件」被使用（錯誤地）指「組件實例」。

Answer 7

組件是創建元素的工廠。