Funksiekomponente vs React.FC in TypeScript: ’n Beskaafde Bespreking

Verstaan die evolusie van TypeScript-typering in React-komponente

Funksiekomponente vs React.FC in TypeScript: ’n Beskaafde Bespreking

React en TypeScript loop saam in ’n projek in. TypeScript sê: "Ek hanteer die tipes." React sê: "Ek hanteer die rendering." En êrens onderweg vra iemand:

Moet ons React.FC gebruik, of net die funksie direk tipes?

Dis ’n redelike vraag. Op die oog af lyk React.FC gepoleer, amptelik—ja, selfs gesofistikeerd. Soos al sou dit jou kode ’n glas wyn inskink en sê "Kom ons maak hierdie komponent elegant." Maar onder die oppervlak dra dit ’n paar kere wat moderne TypeScript meestal oortroon het.

Kom ons kyk nader hierna.

Die Twee Styl

Die Eenvoudige Funksiekomponent

type Props = { title: string };

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

Netjies, duidelik, en maklik om te verstaan. Soos ’n swart koffie: geen tierlantyntjies nie, maak net die werk klaar.

Of, as jy pylefunksies verkies:

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

Albei is geldig, leesbaar, en goed in lyn met huidige beste praktyke.

Die React.FC Variant

import { FC } from 'react';

type Props = { title: string };

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

Hierdie weergawe verbind die komponent met ’n generiese tipe. Dit lyk meer "amptelik," en as jy onlangs TypeScript se utility types ontdek het, mag dit vir jou ’n natuurlike pas voel—soosof jy net ’n geheime klub ontsluit het. Maar soms het geheime klubs ’n fyn gedrukte skryfsel.

Wat React.FC Werklik Doen

React.FC (kort vir React.FunctionComponent) is ’n hulpmiddeltipe wat ’n funksiekomponent beskryf. Dit bied ’n paar standaardgedragswyse:

  • Dit sluit die children-prop standaard in, hetsy jy dit wil hê of nie.
  • Dit kan by sekere redakteurs soms die outo-aanvulling verbeter.
  • Dit kan die terugkeertipe van die funksie ’n bietjie meer eksplisiet maak, hoewel dit selde in praktyk saak maak.

Dit is beskeie geriewe, en in die vroeë dae van React + TypeScript was dit meer nuttig. Maar tye het verander, en vandag is hierdie "kenmerke" dikwels meer ’n hindernis as ’n hulp.

Waarom Dit Minder Gewild Word

Jy kan sê React.FC is die "cargo-broek" van TypeScript—baie sakke, maar die meeste word nie gebruik nie.

  1. Implisiete children

Elke komponent kry ’n children-prop, hetsy dit dit wil hê of nie. Dit kan lei tot verwarrende foute wanneer ontwikkelaars aanvaar children is geldig net omdat die tipe dit sê. (Spoiler: dit is dalk nie.)

  1. Onhandig met generics

Wanneer jou komponent generiese tipes moet gebruik, maak React.FC dinge dikwels meer ingewikkeld, nie net netjies nie. Die sintaks word klonterig, en TypeScript word minder behulpsaam, nie meer nie.

  1. Woordryk sonder duidelikheid

Om te skryf const MyComponent: FC<Props> is langer, en dalk meer vaag, as om die props direk te tipeer.

  1. Nie meer nodig nie

Die oorspronklike redes om React.FC te gebruik — redakteursondersteuning, JSX-inferensie — is meestal aangespreek deur verbeterings aan TypeScript. Wat eenkeer ’n praktiese ompad was, is nou bloot ’n verouderde styl.

’n Kop-aan-kop Vergelyking

Kenmerk function Component() const Component: FC
Sluit children in? Net as dit verklaar is Word altyd ingesluit
Ondersteun generics? Gracieus Nie sonder moeite nie
Woordryk? Minimaal Merkbaar meer
Redakteurs ondersteuning? Voldoende Effens beter in spesifieke gevalle
Aanbeveel? Ja Nie meer nie

Die Aanbevole Benadering

Die konsensus in die gemeenskap is eenvoudig: tipeer jou props direk. As jy wil hê jou komponent moet children aanvaar, sê dit. As jy nie wil hê nie, sal dit nie. Dis die soort eerlikheid jou toekomstige self sal waardeer.

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

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

Dis eksplisiet. Dit is onderhoubaar. En dit doen nie voor asof jou komponent children hanteer as dit dit nie doen nie.

Is Daar Gevalle Waar FC Nog Sinnig Is?

Soms. As jy in ’n ouer kodebasis werk wat sterk op React.FC leun, kan dit belangrik wees om konsekwentheid te handhaaf eerder as om alles oor te skryf. As jy vinnig komponente wil uittoets en nie wil bekommer oor die tipe van children nie, kan FC steeds ’n kortpad wees.

Maar oor die algemeen is dit die uitsonderings wat die reël bevestig.

Ter Afsluiting

React.FC is nie verkeerd nie. Dit is net nie meer nodig nie. Moderne TypeScript het die tipering van React-komponente eenvoudiger en meer voorspelbaar gemaak sonder dit.

Dus, volgende keer as jy na FC reik, stop en oorweeg of jy waarde toevoeg—of net ekstra lae. Meestal sal ’n eenvoudig getipeerde funksie jou beter dien.

In sagteware—soos in die lewe—oorheers duidelikheid bo slinksheid. En minder verrassings beteken gewoonlik minder spyt.

Categories