React组件和ReactElement之间的关系是什么？

Question

我正在阅读使用以下词汇的section of the React docs，但我无法弄清楚它们之间的关系：

• 组件
• 组件的实例
• 组件的后备实例
• 虚拟DOM元素
• A ReactElement

它们是否以及如何相关？

Answer 1

虚拟dom元素是javascript对象，它们代表您的DOM节点，以便更好地重新渲染/扩散/创建支持，而不是在每次状态更改时更新DOM。

ReactElement 是一个简单的javascript对象，代表 UI的可视化部分。哪个可以是html元素或其他反应组件。 该javascript对象将与一个或多个虚拟DOM元素相关联。这是为了表现。

<强>组件

根据文件，它是

  

包含渲染方法的规范对象

我要补充一下：

  

用于创建，组合和包装ReactElements的行为。

行为可以是：

• 绑定数据
• 函数可以绑定到DOM事件
• 组件的扩展/继承支持
• 反应生命周期支持
• javascript流量控制（隐藏/显示多个组件）

组件的实例显然可以被认为与对象定义和对象的实例相同。

定义是创建已定义对象的蓝图。

例如，如果您有一个包含多个ListElement的列表。

• 列表：持有杂货元素

  • ListItem ：honey
  • ListItem ：milk
  • ListItem ：grain
  • ListItem ：fruits

一个列表定义 - ＆gt; 一个实例。

一个ListElement定义 - ＆gt; 该组件的多个实例

组件的支持实例是实际呈现的元素。

注意：当我说绑定/绑定时，我的意思是单向意义。