React組件和ReactElement之間的關係是什麼？

我正在讀一section of the React docs它採用下列詞彙，但我不能找出它們之間的關係：React組件和ReactElement之間的關係是什麼？

A組分
一個組件的實例
一個組件的後盾實例
一虛擬DOM元素
甲ReactElement

如何以及它們如何相關？

2016-06-10 dayuloli

一些概念解釋[這裏]（https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62#.5ulakfekn） – eenagy

謝謝@這篇文章有助於解釋很多概念。從文章看來，（普通）DOM是一個包含HTML元素的樹，React的Virtual DOM版本是一個包含React Elements的樹。 – dayuloli

但我認爲這篇文章在支持實例方面是錯誤的。它說「'ReactDOM.render（）'返回一個React組件實例」，但是它從文檔中說「ReactDOM.render（）'返回一個*引用*到你的組件的* backing實例*」This [comment]（https ：//medium.com/@lewis19921006/a-react-components-backing-instance-is-the-object-in-memory-that-represents-the-node-in-the-view-c4b4b339e3fe#.tekq38wcu）following文章也指出了這種不一致。 – dayuloli

虛擬DOM元素是JavaScript對象，代表您的DOM節點，以便更好地重新渲染/差異/創建支持，而不是在每次更改狀態時更新DOM。

ReactElement是一個簡單的JavaScript對象，代表您的UI的視覺片段。其中可以是html元素或其他反應組件。此javascript對象將與一個或多個虛擬DOM元素相關聯。這是爲了表現。

組件

根據文檔是
包含渲染方法

這一點我想補充

規範對象：

用於創建，組合幷包裝ReactElements與行爲。

的行爲可以是如下：

綁定數據

函數可以是bound DOM事件用於部件

反應的生命週期

延伸/繼承支持支持

javascript流控制（隱藏/顯示多個組件）

元器件實例顯然可以被認爲是相同的對象定義和對象的實例。

定義是創建定義對象的藍圖。

例如，如果您有一個列表與多個ListElement。

列表：保持雜貨元件

列表項：蜂蜜

列表項：牛奶

列表項：穀類

大號istItem：水果

一個列表定義- >一個實例。

一個ListElement定義- 該部件的>多個實例

元器件背襯例如（多個）是/是實際呈現元件。

注意：當我說綁定/綁定我的意思是在單向的意義上。

來源

2016-06-10 11:46:23 eenagy

React組件和ReactElement之間的關係是什麼？

回答

相關問題