Apa perbedaan antara ForwardRefExoticComponent dan ForwardRefRenderFunction dalam bereaksi?

Question

Saya sedang menulis komponen React yang dapat meneruskan ref kepada anak-anaknya

Saya menemukan bahwa untuk jenis kembalian komponen fungsi, saya dapat menggunakan ForwardRefExoticComponent dan ForwardRefRenderFunction . Tapi saya tidak yakin apa perbedaan di antara mereka.

Sejauh ini, Saat menggunakan ForwardRefExoticComponent , saya dapat memperpanjangnya sementara ForwardRefRenderFunction tidak bisa? Saya memposting pertanyaan terkait dengan kasus saya di sini: Bagaimana cara mengekspor forwardRef dengan ForwardRefRenderFunction

Jika ada yang tahu apa perbedaan antara mereka dan apa yang mereka lakukan, tolong bantu saya. Karena sepertinya tim React tidak memiliki dokumen tentang mereka (tapi mereka ada di dalam paket react)

Answer 1

ForwardRefExoticComponent

Definisi yang diambil dari sini adalah

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

Jika Anda menuliskannya, Anda mendapatkan

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

Definisi yang diambil dari sini adalah

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

Perbedaan

• ForwardRefRenderFunctiontidak mendukung propTypesdan defaultProps, sedangkan ForwardRefExoticComponenttidak.
• ForwardRefExoticComponentmemiliki anggota tambahan $$typeofdari jenissymbol
• Tanda tangan panggilan ForwardRefRenderFunctionmengambil propsobjek, yang harus menyertakan anggota childrendan objek ref sebagai parameter, sedangkan tanda tangan panggilan ForwardRefExoticComponenthanya mengambil objek props dengan bentuk arbitrer sebagai parameter.

Beberapa pemikiran lagi

Interaksi kedua definisi tersebut paling baik dilihat dalam definisi forwardReffungsi :

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

Juga, perbedaan besar antara kedua definisi tersebut tampaknya adalah, bahwa ForwardRefExoticComponent(seperti semua komponen eksotis) bukanlah komponen fungsi, tetapi sebenarnya hanya objek, yang diperlakukan secara khusus saat merendernya. Karena itu komentarnya

CATATAN : Komponen eksotis tidak dapat dipanggil.

Dan untuk beberapa alasan, komponen eksotis tersebut diperlukan di beberapa tempat.