1. ReactNode

ReactNode是React中概念范围最大的一种类型, 它包括了

1. string
2. number
3. null
4. boolean
5. undefined
6. ReactElement
7. Iterable
8. JSX.Element
9. ReactFragment === <></>
10. 最后一种也就是直接返回使用数组包裹前面9中的类型

2. JSX.Element

这个类型就比较简单了, 看下面例子

function MyComponent() {
  return (
    <div>
      <h1>h1</h1>
      <p>p</p>
    </div>
  );
}

上面MyComponent组件中的div和h1和p , 就是JSX.Element可以看出JSX.Element其实是一个很具体的概念, 就是正常使用的标签

在 React -> index.d.ts 中我们可以看出 JSX 是一个全局namespace, 里面还定义很多类型. 如下

declare global {
 namespace JSX {
type ElementType = string | React.JSXElementConstructor<any>;
      // extends React.ReactElement, 并且约束类型都是any 
      // 下面继续看React.ReactElement约束了什么
      interface Element extends React.ReactElement<any, any> {}
      interface ElementClass extends React.Component<any> {
          render(): React.ReactNode;
      }
      interface ElementAttributesProperty {
          props: {};
      }
      interface ElementChildrenAttribute {
          children: {};
      }
      type LibraryManagedAttributes<C, P> = C extends
          React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
          ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
              ? ReactManagedAttributes<U, P>
          : ReactManagedAttributes<T, P>
          : ReactManagedAttributes<C, P>;

      interface IntrinsicAttributes extends React.Attributes {}
      interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {}

      interface IntrinsicElements {/*...*/}
 }
}

3. ReactElement

来看ReactElement的类型定义

interface ReactElement<
      P = any,
      T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
  > {
      type: T;
      props: P;
      key: string | null;
  }

ReactElement在React中是一个更加具体的定义, 规定了它必须有type和prop以及key, 所以上面的JSX.Element继承ReactElement并且type和props都是any, 这里的props和type就是React的Fiber对应的值 . 例如

const element = <div className="my-class" title="abc">内容</div>;

这里的element就是一个标准的ReactElement

总的来说

ReactNode：是一个广义的概念，表示 React 树中的节点，可以是元素、文本或其他类型的节点。

JSX.Element：通过 JSX 语法创建的具体元素，是 ReactNode 的一种类型。

ReactElement：是 React 内部对元素的一种表示，包含元素的类型、属性和子元素等信息，也是 ReactNode 的一种类型。