Sự khác biệt giữa ForwardRefExoticComponent và ForwardRefRenderFunction trong phản ứng là gì?

Question

Tôi đang viết một thành phần React có thể chuyển tiếp ref đến chilren của nó

Tôi phát hiện ra rằng đối với kiểu trả về của các thành phần hàm, tôi có thể sử dụng ForwardRefExoticComponent và ForwardRefRenderFunction . Nhưng tôi không chắc sự khác biệt giữa chúng là gì.

Cho đến nay, Khi sử dụng ForwardRefExoticComponent , tôi có thể mở rộng nó trong khi ForwardRefRenderFunction không thể? Tôi đã đăng một câu hỏi liên quan đến trường hợp của mình tại đây: Cách xuất forwardRef với ForwardRefRenderFunction

Nếu ai biết sự khác biệt giữa chúng và những gì chúng làm, xin hãy giúp tôi. Bởi vì có vẻ như nhóm React không có tài liệu nào về chúng (nhưng chúng nằm trong gói phản ứng)

Answer 1

ForwardRefExoticComponent

Định nghĩa được lấy từ đây là

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

Nếu bạn viết nó ra bạn nhận được

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

Định nghĩa được lấy từ đây là

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

Sự khác biệt

• ForwardRefRenderFunctionkhông hỗ trợ propTypesvà defaultProps, ngược lại ForwardRefExoticComponent.
• ForwardRefExoticComponentcó một thành viên bổ sung $$typeofcủa loạisymbol
• Chữ ký cuộc gọi của ForwardRefRenderFunctionlấy một propsđối tượng, phải bao gồm một thành viên childrenvà một đối tượng ref làm tham số, trong khi chữ ký cuộc gọi ForwardRefExoticComponentchỉ lấy một đối tượng đạo cụ có hình dạng tùy ý làm tham số.

Một số suy nghĩ thêm

Sự tác động lẫn nhau của hai định nghĩa đó được thấy rõ nhất trong định nghĩa của forwardRefhàm :

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

Ngoài ra, sự khác biệt lớn giữa hai định nghĩa dường như là ForwardRefExoticComponent(giống như tất cả các thành phần kỳ lạ) không phải là thành phần chức năng, mà thực sự chỉ là các đối tượng, được xử lý đặc biệt khi hiển thị chúng. Do đó nhận xét

LƯU Ý : Không thể gọi các thành phần ngoại lai.

Và vì một số lý do, những thành phần kỳ lạ đó là cần thiết ở một số nơi.