React.render return 是什么意思？组件实例或组件 class？

Question

在 this 要点中，在这一行 React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

ReactComponent指的是什么？一个 instance or a class ?

提问原因：我正在尝试创建一个可视化 React 术语的概念图（如下所示）。

Answer 1

TL;DR React.render return一个 ReactComponent 实例

如您所写，React.render 接受两个参数。了解它们的含义很重要。这一点令人困惑，所以请耐心等待。

1) ReactElement - 是一个虚拟 dom 实例。有时这个实例映射到原生 DOM 元素，例如 'div'，有时它映射到 ReactComponent 实例，例如封装了其他 ReactElements 树的 MyComponent。你看到这里的递归了吗？

ReactElement -> Tree<ReactComponent returns ReactElement -> Tree<ReactComponent returns ReactElement>>

现在，让我们创建一个虚拟 dom 实例

const virtualElement = React.createElement('MyComponent');

2) 第二个参数是原生 DOM 元素，用于将 virtualElement 渲染到其中。

基本上，React.render 所做的是翻译原生 DOM 元素中的 virtualElement，并将其插入指定为 [=] 中第二个参数的原生 DOM 元素中42=]函数。

因此，React.renderreturn是一个 ReactComponent 实例（封装的 ReactElement 树的状态表示）。

我认为您可能对这种表示法感到有点沮丧，但它非常有道理。用 Java 来想一想，例如：

function Person getPerson() { 
  return new Person();
}

看，函数的签名没有将 PersonInstance 指定为 return 值，而是 Person.

What does React.render return ? Component Instance or Component class?