Funkcionális komponensek vs React.FC TypeScript-ben: Egy kulturált párbeszéd

A TypeScript típusdefiníciók fejlődésének megértése a React komponensekben

Funkcionális komponensek vs React.FC TypeScript-ben: Egy kulturált párbeszéd

A React és a TypeScript együtt lépnek be egy projektbe. A TypeScript azt mondja: „Én kezelem a típusokat.” A React pedig azt: „Én kezelem a renderelést.” És valahol útközben valaki megkérdezi:

Használjunk React.FC-t, vagy csak típusozzuk közvetlenül a funkciót?

Ez egy jogos kérdés. Első pillantásra a React.FC kifinomultnak, hivatalosnak—sőt, igényesnek tűnik. Mintha felkínálna egy pohár bort a kódodnak, és azt mondaná: „Tegyük ezt a komponenst elegánssá.” De a felszín alatt van némi csomag, amit a modern TypeScript már többnyire kinőtt.

Nézzük meg közelebbről.

A két stílus

Egyszerű funkcionális komponens

type Props = { title: string };

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

Tiszta, világos és könnyen érthető. Olyan, mint egy fekete kávé: semmi fakszni, csak elvégzi a munkát.

Vagy ha inkább az arrow function-t kedveled:

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

Mindkettő érvényes, olvasható, és jól illeszkedik a jelenlegi legjobb gyakorlatokhoz.

A React.FC változat

import { FC } from 'react';

type Props = { title: string };

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

Ez a változat egy generikus típussal vonja be a komponenst. Hivatalosabbnak tűnik, és ha nemrég fedezted fel a TypeScript segédtípusait, természetesnek hathat—mintha csak egy titkos klubba nyertél volna belépést. De néha a titkos klubok finom betűs részekkel is járnak.

Mit is csinál valójában a React.FC?

A React.FC (React.FunctionComponent rövidítése) egy segédtípus, ami egy funkcionális komponenst ír le. Néhány alapértelmezett viselkedést kínál:

  • Alapból tartalmazza a children prop-ot, akár akarod, akár nem.
  • Néha javíthatja az automatikus kiegészítést bizonyos szerkesztőkben.
  • A függvény visszatérési típusát kissé explicitebbé teheti, bár ez a gyakorlatban ritkán számít.

Ezek szerény kényelmi funkciók, és a React + TypeScript korábbi időszakában hasznosabbak voltak. De az idők változtak, és ma ezek a „funkciók” gyakran inkább akadályoznak, mint segítenek.

Miért megy ki a divatból?

A React.FC-t a TypeScript cargo nadrágjaként is említhetnénk—rengeteg zsebbel, amik többsége üres.

  1. Implicit children

Minden komponens megkapja a children prop-ot, akármilyen is a valós igénye. Ez zavart okozó hibákhoz vezethet, amikor a fejlesztők úgy hiszik, hogy a children mindig érvényes, csupán mert a típus ezt mondja. (Spoiler: nem feltétlenül az.)

  1. Kényelmetlen generikusokkal

Ha a komponensednek generikus típusokat kell használnia, a React.FC inkább bonyolulttá teszi a dolgokat, nem egyszerűbbé. A szintaxis nehézkes lesz, és a TypeScript kevésbé lesz segítőkész.

  1. Terjengősség tisztaság nélkül

Az const MyComponent: FC<Props> leírás hosszabb és vitathatóan kevésbé átlátható, mint egyszerűen közvetlenül típusozni a props-okat.

  1. Már nem szükséges

Az eredeti okok, amelyek miatt a React.FC-t használták—szerkesztői támogatás, JSX-féle intuíció—többnyire megoldódtak a TypeScript fejlődésével. Ami egyszer praktikus megoldás volt, ma már csak egy elavult stílus.

Oldal-az-oldal mellett összehasonlítás

Jellemző function Component() const Component: FC
Tartalmaz children-t? Csak ha deklarálod Mindig tartalmazza
Támogatja a generikusokat? Zökkenőmentesen Nem erőfeszítés nélkül
Terjengős? Minimális Észrevehetően több
Szerkesztői támogatás? Elégséges Különleges esetekben jobb
Ajánlott? Igen Már nem

Az ajánlott megközelítés

A közösség konszenzusa egyszerű: típusozd közvetlenül a props-okat. Ha akarod, hogy a komponensed fogadjon children-t, jelezd ezt explicit módon. Ha nem, akkor nem fog. Ez az az őszinteség, amit a jövőbeli önmagad értékelni fog.

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

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

Ez explicit. Karbantartható. És nem tesz úgy, mintha a komponensed kezelné a children-t, ha valójában nem kezeli.

Vannak esetek, amikor a FC még mindig értelmes lehet?

Előfordulhat. Ha egy legacy kódbázison dolgozol, ami erősen támaszkodik a React.FC-re, a konzisztencia megőrzése fontosabb lehet, mint minden újraírása. Ha gyorsan szeretnél komponenseket kipróbálni és nem akarsz a children típusozásával bajlódni, a FC még mindig lehet egy gyors megoldás.

De általánosságban ezek a kivételek erősítik a szabályt.

Zárszóként

A React.FC nem hibás. Csak már nem szükséges. A modern TypeScript egyszerűbbé és kiszámíthatóbbá tette a React komponensek típusozását nélküle.

Tehát legközelebb, amikor az FC-hez nyúlnál, állj meg, és gondold át, hogy értéket adsz hozzá—vagy csak plusz rétegeket. Gyakrabban egy egyszerűen típusozott funkció jobb szolgálatot tesz.

A szoftverfejlesztésben—ahogy az életben is—a tisztaság felülmúlja az ügyességet. És kevesebb meglepetés általában kevesebb megbánást jelent.

Categories