React 中的 ForwardRefExoticComponent 和 ForwardRefRenderFunction 有什么区别？

我正在编写一个 React 组件，它可以将引用转发给它的子组件

我发现对于函数组件的返回类型，我可以使用ForwardRefExotic组件 and 前向参考渲染函数。但我不确定它们之间有什么区别。

到目前为止，使用时ForwardRefExotic组件，我可以延长它，而前向参考渲染函数不能？我在这里发布了与我的案例相关的问题：如何使用 ForwardRefRenderFunction 导出forwardRef https://stackoverflow.com/questions/64236857/how-to-export-forwardref-with-forwardrefrenderfunction/64237782#64237782

如果有人知道他们之间的区别以及他们所做的事情，请帮助我。因为React团队似乎没有关于它们的文档（但它们在react包内）

ForwardRefExotic组件

定义取自here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/927f70dd89119f11a47688ed5eb4e0e082bef219/types/react/index.d.ts is

interface ExoticComponent<P = {}> {
    /**
     * **NOTE**: Exotic components are not callable.
     */
    (props: P): (ReactElement|null);
    readonly $$typeof: symbol;
}

interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
    displayName?: string;
}

interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
    defaultProps?: Partial<P>;
    propTypes?: WeakValidationMap<P>;
}

如果你写出来你会得到

interface ForwardRefExoticComponent<P> {
    /**
     * **NOTE**: Exotic components are not callable.
     */
    (props: P): (ReactElement|null);
    readonly $$typeof: symbol;
    displayName?: string;
    defaultProps?: Partial<P>;
    propTypes?: WeakValidationMap<P>;
}

前向参考渲染函数

定义取自here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/927f70dd89119f11a47688ed5eb4e0e082bef219/types/react/index.d.ts is

interface ForwardRefRenderFunction<T, P = {}> {
    (props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
    displayName?: string;
    // explicit rejected with `never` required due to
    // https://github.com/microsoft/TypeScript/issues/36826
    /**
     * defaultProps are not supported on render functions
     */
    defaultProps?: never;
    /**
     * propTypes are not supported on render functions
     */
    propTypes?: never;
}

差异

• ForwardRefRenderFunction不支持propTypes and defaultProps， 然而ForwardRefExoticComponent does.
• ForwardRefExoticComponent有一个额外的成员$$typeof类型的symbol
• 的呼叫签名ForwardRefRenderFunction需要一个props对象，它必须包含一个成员children和 ref 对象作为参数，而调用签名ForwardRefExoticComponent只接受任意形状的 props 对象作为参数。

还有一些想法

这两个定义的相互作用在的定义forwardRef功能 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/927f70dd89119f11a47688ed5eb4e0e082bef219/types/react/index.d.ts#L805:

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

此外，这两个定义之间的一个很大的区别似乎是，ForwardRefExoticComponent（像所有外来组件一样）不是函数组件，而实际上只是对象，在渲染它们时会进行特殊处理。因此评论

NOTE：外来组件不可调用。

由于某种原因，这些奇异的组件在某些地方是必要的。