组件类型

相比于Vue，React的组件类型很多，其源码在

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;
export const ContextConsumer = 9;
export const ContextProvider = 10;
export const ForwardRef = 11;
export const Profiler = 12;
export const SuspenseComponent = 13;
export const MemoComponent = 14;
export const SimpleMemoComponent = 15;
export const LazyComponent = 16;
export const IncompleteClassComponent = 17;
export const DehydratedFragment = 18;
export const SuspenseListComponent = 19;
export const FundamentalComponent = 20;
export const ScopeComponent = 21;
export const Block = 22;
export const OffscreenComponent = 23;
export const LegacyHiddenComponent = 24;

大体可以分为以下几类

原生组件类型

这是整个浏览器视图渲染的基石

HostRoot （tag = 3 ）

整个React的根节点，在初始化的时候由 ReactDOM.render(document.getElementById("root")) 创建

‍

HostComponent

浏览器的原生组件系列(除了Text),具体可以包含

• div
• button
• ....

‍

‍

‍

React16的组件类型 - 知乎 (zhihu.com)

‍

HostText

文本类型的元素节点

需要注意的是： 在浏览器中我们认为每一个文本元素都是一个文本节点。但是在React中对于文本节点进行了优化，如果没有兄弟节点的文本节点，其直接作为父节点的props.children,而不创建一个 HostText

• <div> text </div> text不是文本节点
• <div> text { state } </div> text是文本节点
• <div> text <span> span </span></div> text是文本节点

HostPortal

‍

有状态组件

ClassComponent

ContextConsumer

ContextProvider

无状态组件

FunctionComponent

IndeterminateComponent

ForwardRef

MemoComponent

SimpleMemoComponent

‍

虚拟组件

Fragment

Mode

Profiler

懒加载组件

Suspense

‍