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

Question

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

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

它们是否相关以及如何相关？

Answer 1

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

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

组件

根据文档，它是

specification object that contains a render method

我要补充的是:

for creating , combining and wrapping ReactElements with behaviour.

行为可以是以下:

• 绑定(bind)数据
• 函数可以绑定(bind)到 DOM 事件
• 组件的扩展/继承支持
• React 的生命周期支持
• JavaScript 流程控制(隐藏/显示多个组件)

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

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

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

• 列表:保存杂货元素

  • ListItem:亲爱的
  • ListItem:牛奶
  • ListItem: Cereal
  • ListItem:水果

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

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

组件的支持实例是实际渲染的元素。

注意:当我说绑定(bind)/绑定(bind)时，我指的是单向意义上的。