ReactRefExoticComponent ve ForwardRefRenderFunction arasındaki fark nedir?

Question

Refü çocuklarına iletebilen bir React bileşeni yazıyorum

Fonksiyon bileşenlerinin dönüş türü için ForwardRefExoticComponent ve ForwardRefRenderFunction kullanabileceğimi öğrendim . Ama aralarındaki farkın ne olduğundan emin değilim.

Şimdiye kadar, ForwardRefExoticComponent kullanırken, ForwardRefRenderFunction bunu yapamazken genişletebilir miyim ? Burada durumumla ilgili bir soru yayınladım: ForwardRefRenderFunction ile forwardRef nasıl dışa aktarılır

Aralarındaki farkın ne olduğunu bilen varsa, lütfen bana yardım et. Görünüşe göre React ekibinin onlar hakkında bir belgesi yok (ancak react paketinin içindeler)

Answer 1

ForwardRefExoticComponent

Alınan tanım burada olduğunu

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

Eğer yazarsan alırsın

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

Alınan tanım burada olduğunu

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

Farklılıklar

• ForwardRefRenderFunctionpropTypesve desteklemiyor defaultProps, oysa ForwardRefExoticComponent.
• ForwardRefExoticComponentek bir $$typeoftür üyesi varsymbol
• Çağrı imza ForwardRefRenderFunctionbir alan props, bir üye içermelidir nesne, childrençağrı imza ise ve parametre olarak ref nesnesi ForwardRefExoticComponentyalnızca sahne parametresi olarak rasgele bir şekle sahip nesne alır.

Biraz daha düşünce

Bu iki tanımın etkileşimi en iyi işlevin tanımındaforwardRef görülür :

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

Ayrıca, iki tanım arasındaki büyük bir fark, ForwardRefExoticComponent(tüm egzotik bileşenler gibi) işlev bileşenleri olmayıp, aslında yalnızca nesneler oluştururken özel olarak ele alınan nesneler gibi görünüyor . Bu nedenle yorum

NOT : Egzotik bileşenler çağrılamaz.

Ve bazı nedenlerden dolayı, bu egzotik bileşenler bazı yerlerde gereklidir.