reactjs - React 组件和 ReactElement 之间有什么关系？

Question

我正在阅读使用以下词汇表的 React 文档的一部分，但我无法弄清楚它们之间的关系：

• 一个组件
• 组件的实例
• 组件的支持实例
• 一个虚拟 DOM 元素
• 一个ReactElement

它们是否以及如何相关？

Answer 1

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

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

零件

根据文档，它是

包含渲染方法的规范对象

我要补充的是：

用于创建、组合和包装带有行为的 ReactElements。

行为可以如下：

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

组件的实例很明显可以认为是对象定义和对象的实例。

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

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

• List : 持有杂货元素

  • ListItem : 蜂蜜
  • ListItem : 牛奶
  • ListItem : 麦片
  • ListItem : 水果

一个列表定义-->一个实例。

一个 ListElement 定义-->该组件的多个实例

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

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