javascript - react 中 ForwardRefExoticComponent 和 ForwardRefRenderFunction 有什么区别？

Question

我正在编写一个 React 组件，它可以将 ref 转发给它的 child
我发现对于函数组件的返回类型，我可以使用 ForwardRefExoticComponent 和 ForwardRefRender 函数 .但我不确定它们之间有什么区别。
到目前为止，当使用 ForwardRefExoticComponent ，我可以在 的同时扩展它ForwardRefRender 函数 不能？我在这里发布了一个与我的案例相关的问题:How to export forwardRef with ForwardRefRenderFunction
如果有人知道它们之间的区别以及它们的作用，请帮助我。因为 React 团队似乎没有关于它们的文档(但它们在 react 包内)

Answer 1

ForwardRefExoticComponent
定义取自 here是

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>;
}

ForwardRefRender 函数
定义取自 here是

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和 defaultProps , 而 ForwardRefExoticComponent做。

ForwardRefExoticComponent有一个额外的成员$$typeof类型 symbol

ForwardRefRenderFunction的调用签名需要 props对象，它必须包含一个成员 children和一个 ref 对象作为参数，而 ForwardRefExoticComponent 的调用签名仅将任意形状的 props 对象作为参数。

还有一些想法
这两个定义的相互作用最好在 definition of the forwardRef function 中看到。 :

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

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

NOTE: Exotic components are not callable.

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