פֿונקציאָנלעכע קאָמפּאָנעץ פאַרגלייך מיט React.FC אין TypeScript: אַ סאַמעכדיקער דיסקורס

React און TypeScript זענען צוזאַמען אַריבער אין אַ פּראָיעקט. TypeScript זאגט: "איך נעמען איבער די טיפּן." React זאגט: "איך נעמען איבער דעם רענדערן." און אין דער ערשטער וועג, פֿרעגט ווער עס גייט:

זאָל מען נוץ נעמען פֿון React.FC, אָדער נאָר טיפּן די פונקציאָנ פֿאַרבינדן דירעקט?

דאס איז א מתבקשת פֿרעג. אויפן ערשטן בליק שיינט React.FC פּאָליצירט, אָפֿיציעל—even סאָפיסטיקירט. ווי אויב עס וואָלט געגאָסן א גלאַס וויין און געזאָגט "לאָמיר מאַכן דעם קאָמפּאָנענט עלעגאַנט." אָבער אונטער דער אויפפֿירונג טראָגט עס עטלעכע נייטיקייטן וואָס דער מאָדערנער TypeScript ווייניקער און ווייניקער דאַרף.

לאמיר נעמען אַ נאָענטערן קוק.

---

די צוויי סטיילער

דער פּשוטער פונקציאָנעלער קאָמפּאָנענט

type Props = { title: string };

function MyComponent({ title }: Props) {
  return <h1>{title}</h1>;
}

ריין, קלאָר און גרינג צו פֿאַרשטיין. ווי שוואַרץ קאַווע: קיין פריען, נאָר טוט די אַרבעט.

אָדער, אויב דו נעמסט באַריף־פֿונקציאָנען:

const MyComponent = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

ביידע זענען גילטיק, לייענבאַר און גוט אויסגעשטרעקט מיט די היינטיקע בעסטע פּראַקטיסן.

---

דער React.FC פֿאַרבאַנד

import { FC } from 'react';

type Props = { title: string };

const MyComponent: FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

דעם ווערסיע פֿאַרפּאַקערט דעם קאָמפּאָנענט מיט אַ גענערישן טיפּ. עס שיינט מער "אָפֿיציעל," און אויב דו האָסט לעצטנס אַנטדעקט די נוציק טײַפּס אין TypeScript, קען עס פילן ווי אַ נאַטורלעך פּאַסן—ווי אויב דו האָסט בלויז געעפֿנט אַ סוד קלוב. אָבער מאָל קומען כאָטש סודות מיט קליינע שריפטן.

---

וואָס React.FC טאַקע טוט

React.FC (קורץ פֿאַר React.FunctionComponent) איז אַ הילף־טיפּ וואָס באַשרײַבט אַ פונקציאָנעלן קאָמפּאָנענט. עס פאָרשלאָגט עטלעכע פּשוטע פֿעיִקייטן:

• עס אַרײַננעמט די prop "children" אין באַזונדער, צי דו ווילסט עס אָדער נישט.
• עס קען געבן אַ ביסל בעסערן אויספֿילן־שליסל אין עטלעכע רעדאַקטאָרן.
• עס קען מאַכן דעם אופֿן פֿון דער צוריקקומען פֿונקציאָנ קלארער, כאָטש דאָס איז אָפֿט נישט וויכטיק אין פּראַקטיק.

די זענען פּשוטע באַקוועמעטס, און אין פרי־טעג פֿון React + TypeScript זענען זיי געווען מער נוצלעך. אָבער די צייטן האָבן זיך געביטן, און הײַנט, די „פֿעיִקייטן" טראָגן אָפֿט מער שוועריקייטן ווי הילף.

---

פֿאַר וואָס עס ווערט ווייניקער באַוווּסט

מע קען זאָגן אַז React.FC איז דער פרעמד פּאַנץ פֿון TypeScript—א פּאָרטעלעך פֿאַר אַלע זאַכן, אָבער רובֿ זײַנע זעקלען ווערן נישט געניצט.

1. ימפּליסיט וועלכע „children“

יעדער קאָמפּאָנענט באַקומען אן אַ prop "children" צי ער וויל דאָס אָדער נישט. דאָס קען פירן צו פֿאַרקאַקטע באגס ווען אַנטוויקלער מיינען די קינדער זענען גוט בלויז ווײַל דער טיפּ זאגט אַזוי. (ספּאָילער: זיי קען זיין נישט.)

2. שוועריקייט מיט גענעריקן

ווען דיין קאָמפּאָנענט דאַרף נוצן גענערישע טייפּס, React.FC מאַכן די זאַכן מער קלענערלעך, נישט ריין. די סינטאַקס ווערט שווער, און TypeScript ווערט ווייניקער נוצלעך.

3. לענגערקייט אָן קלאָרקייט

שרײַבן const MyComponent: FC<Props> איז לאָנגער, און פיל מער אומקלאָר ווי נאָר טיפּן די props גלייך.

4. ניט מער נייטיק

די אָריגינעלע סיבות צו נוצן React.FC — רעדאַקטאָר סופּאָרט, JSX ינפֿערענץ — ווערן דערשראָקן דורך פֿאַרבעסערונג פון TypeScript. וואס איז געווען אַ פּראַקטישער אַרבעט אַרומנעמען, איז הײַנט אַ ירושה סטייל.

---

אַ פּאָרטע צו פּאָרטע פֿאַרגלײַך

פֿעיִקייט	פונקציאָנעלער Component()	const Component: FC
אַרײַננעמט children?	נאָר אויב דקלאַרירט	שטענדיק אַרײַנגעשריבן
שטיצט גענערישע טייפּס?	גראַצעפאַל	נישט אָן שווערות
לענגערקייט?	מינימאַל	פעלן-קלארע
רעדאַקטאָר סופּאָרט?	גענוג	ביסל בעסער אין ספּעציפֿישע פאַלן
רעקאָמענדירט?	יאָ	נישט מער

---

דער רעקאָמענדירטער אָנגאַנג

דער סאָציאַלער ענין איז פּשוט: טיפּ דיינע props גלייך. אויב דו ווילסט וואָס דיין קאָמפּאָנענט נעמען קינדער, זאג דאָס קלאר. אויב נישט, נישט. דאָס איז דער טיפּ אמת וואָס דער קומענדיקער דײַן זיךוער וועט עכטע אפלאַקירן.

type Props = {
  title: string;
  children?: React.ReactNode;
};

const MyComponent = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

עס איז קלאָר. עס איז האַלטבאַר. און עס פּרוּווט נישט אז דו באַהאַנדלט עלעמענט די קינדער ווען עס טאַקע טוט נישט.

---

זענען דאָ פאַלן ווו React.FC נאָך מאַכט זינען?

אָפֿט מאָל. אויב דו אַרבעט אין אַ עלטערן קאָודבייס וואָס מיט אַ שטרענגקייט געניצט React.FC, האַלטן קאָנסיסטענץ קען זײַן וויכטיקער ווי אַלע די שרײַבן ווידער. אויב דו מאַכסט שנעל עטלעכע קאָמפּאָנעץ און ווילסט נישט טראַכטן וועגן דעם טייפּן פֿון קינדער, React.FC קען נאָך זיין אַ קורצע וועג.

אָבער אין אַלגעמיין זענען דאָס אויסנעמונגען וואָס געפֿינען דעם כּלל אמת.

---

צום אַבסלוט

React.FC איז נישט פאַלש. עס איז נאָר נישט מער נייטיק. דער מאָדערנער TypeScript האָט געהאָלפֿן צו מאַכן טייפּינג פון React קאָמצפּאָנענטן גרינגער און מער פּרעדיקטאַבל אָן.

אַזוי דעם קומענדיקן מאָל ווען דו נעמסט FC, שטייַג אויף און באַטראַכט צי דו געברענגסט ווערט אָדער נאָר צוגעבונדן שיכטן. מער אָפֿט ווי נישט, אַ פּשוט גישרײַבן טייפּט פונקציע וועט דינען דיר בעסער.

אין סאָפֿטווער — ווי אין לעבן — קלאָרקייט שטעלט קלוגקייט. און ווייניקערן געפּלעקלעך מיינט ווייניקער באַקענענישן.