Qual è la differenza tra ForwardRefExoticComponent e ForwardRefRenderFunction in React?

Question

Sto scrivendo un componente React che può inoltrare ref ai suoi figli

Ho scoperto che per il tipo di ritorno dei componenti della funzione, posso usare ForwardRefExoticComponent e ForwardRefRenderFunction . Ma non sono sicuro di quale sia la differenza tra loro.

Finora, quando utilizzo ForwardRefExoticComponent , posso estenderlo mentre ForwardRefRenderFunction non può? Ho pubblicato una domanda relativa al mio caso qui: Come esportare forwardRef con ForwardRefRenderFunction

Se qualcuno sa qual è la differenza tra loro e quello che fanno, per favore aiutami. Perché sembra che il team di React non abbia documenti su di loro (ma sono all'interno del pacchetto React)

Answer 1

ForwardRefExoticComponent

La definizione presa da qui è

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

Se lo scrivi, ottieni

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

ForwardRefRenderFunction

La definizione presa da qui è

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

Differenze

• ForwardRefRenderFunctionnon supporta propTypese defaultProps, mentre ForwardRefExoticComponentfa.
• ForwardRefExoticComponentha un membro aggiuntivo $$typeofdi tiposymbol
• La firma della chiamata di ForwardRefRenderFunctionaccetta un propsoggetto, che deve includere un membro childrene un oggetto ref come parametri, mentre la firma della chiamata di ForwardRefExoticComponentaccetta solo un oggetto di scena di forma arbitraria come parametro.

Alcuni pensieri in più

L'interazione di queste due definizioni si vede meglio nella definizione della forwardReffunzione :

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

Inoltre, una grande differenza tra le due definizioni sembra essere che ForwardRefExoticComponent(come tutti i componenti esotici) non sono componenti funzione, ma in realtà solo oggetti, che vengono trattati in modo speciale durante il rendering. Quindi il commento

NOTA : i componenti esotici non sono richiamabili.

E per qualche ragione, quei componenti esotici sono necessari in alcuni luoghi.