React.ReactNode | 表示 React 中可以渲染的所有内容类型，包括数字、字符串、JSX 元素、数组、Fragment、null 等。 | 是一个宽泛的类型，涵盖了所有可能作为组件的子节点的类型。包括：string、number、boolean、null、undefined、JSX.Element、React.Component、React.Fragment 等。 | jsx <div>{123}</div> <div>{['A', 'B', 'C']}</div> <div><span>Content</span></div> <div>{null}</div> |
JSX.Element | 表示一个 JSX 元素，通常由 JSX 语法创建的 React 元素，它是 React 元素的具体类型。 | 是 ReactElement 的具体类型，通常表示通过 JSX 创建的元素。与 React.ReactNode 的范围不同，它主要关注 JSX 元素。 | jsx <div>Hello</div> <button>Click me</button> |
React.Component (类组件) | 表示一个基于类的 React 组件，它是 React 组件的一个构造函数或类实例。类组件有生命周期方法，可以通过 state 和 props 管理数据。 | 是一个基类，用于创建 React 类组件。类组件的 render 方法必须返回 JSX。 | jsx class MyComponent extends React.Component { render() { return <div>Hello</div>; }} |
React.FC / React.FunctionComponent (函数组件) | 表示一个函数组件类型，它是函数式的组件，通常是一个纯函数，接受 props 作为参数并返回 JSX。React 推荐使用函数组件。 | 是一个简写形式，表示一个返回 JSX 元素的函数，接收 props 作为参数。可以用 React.FC<Props> 来定义。通常不需要使用 children 的默认类型。 | jsx const MyComponent: React.FC<{ title: string }> = ({ title }) => <h1>{title}</h1>; |
ReactElement | 表示一个具体的 React 元素实例，通常由 React.createElement 创建，包含类型、props 和 children。 | 更具体地表示一个 React 元素对象，是 JSX.Element 的泛化。 | jsx React.createElement('div', { className: 'myClass' }, 'Hello') |
ReactNode (组件返回值类型) | 表示一个组件的返回值类型，可以是任何可以渲染的内容，包括 JSX、字符串、数字、数组等。常用于组件的返回类型。 | 通常表示组件返回的类型，可以是 React.ReactNode，但是侧重于渲染内容。 | jsx const MyComponent = () => <div>Content</div>; |
ReactChild | 表示一个子元素，可以是单个元素或数组。它通常指一个 React 元素的子节点。 | 包括 ReactElement、string、number 和 ReactFragment 等类型。 | jsx <div><span>Hello</span></div> <div>{123}</div> |
JSX.IntrinsicElements | 表示原生 HTML 元素在 JSX 中的类型，如 div, span, button 等。 | 这些类型定义了原生 HTML 元素如何在 JSX 中表现，通常与元素的 props 一起定义。 | jsx <div>Content</div> <button>Click</button> |
