reactjs - React.render 返回什么？组件实例还是组件类？

Question

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

ReactComponent 指的是什么？安instance or a class ？

提问原因:我正在尝试创建一个概念图来可视化 React 术语(如下所示)。

Answer 1

TL;DR React.render 返回一个 ReactComponent 实例

<小时/>

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

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

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

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

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

2) 第二个参数是用于渲染 virtualElement 的 native DOM 元素。

基本上，React.render 所做的就是翻译 native DOM 元素中的 virtualElement 并将其插入到 React.render 函数中指定为第二个参数的 native DOM 元素中。

<小时/>

因此，React.render 返回一个 ReactComponent 实例(封装的 ReactElement 树的有状态表示)。

我认为您可能会对这个符号感到有点沮丧，但它是完全有道理的。以 Java 为例:

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

看，函数的签名没有指定 PersonInstance 作为返回值，而是指定 Person。