Funkcia-Komponentoj kontraŭ React.FC en TypeScript: Civila Diskuto

Kompreni la evoluon de TypeScript-tipado en React-komponentoj

Funkcia-Komponentoj kontraŭ React.FC en TypeScript: Civila Diskuto

React kaj TypeScript eniras projekton kune. TypeScript diras, "Mi prizorgos la tipojn." React diras, "Mi prizorgos la montradon." Kaj ie en la vojo, iu demandas:

Ĉu ni uzu React.FC, aŭ simple tipigu la funkcion rekte?

Estas racia demando. Plejeble, React.FC aspektas eleganta, oficiala—eĉ sofistika. Kiel se ĝi povus verŝi vin glason da vino kaj diri "Ni faru ĉi tiun komponanton elegantan." Sed sub la surfaco, ĝi portas kelkajn ŝarĝojn kiujn moderna TypeScript plejparte forprenis.

Rigardu pli proksime.

La Du Stilo

La Simpla Funkcia Komponento

type Props = { title: string };

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

Pura, klara, kaj facile komprenebla. Kiel nigra kafo: sen ornamaĵoj, simple plenumanta la taskon.

Aŭ, se vi preferas sagajn funkciojn:

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

Ambaŭ validas, legiĝas facile, kaj bone kongruas kun aktualaj plejbonaj praktikoj.

La React.FC Varianto

import { FC } from 'react';

type Props = { title: string };

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

Ĉi tiu versio envolvas la komponanton per ĝenerala tipo. Ĝi aspektas pli "oficiala," kaj se vi ĵus malkovris la utilajn tipojn de TypeScript, ĝi eble ŝajnas natura elekto—kvazaŭ vi ĵus malfermis sekretan klubon. Sed foje, sekretaj kluboj venas kun malgrandaj kondiĉoj.

Kion React.FC Fakte Faras

React.FC (mallongigo por React.FunctionComponent) estas helpa tipo, kiu priskribas funkciajn komponantojn. Ĝi proponas kelkajn defaŭltajn kondutojn:

  • Ĝi inkluzivas la propran children defaŭlte, ĉu vi deziras ĝin aŭ ne.
  • Ĝi povas foje plibonigi aŭtomatan kompletadon en certaj redaktiloj.
  • Ĝi povas fari la revenan tipon de la funkcio iom pli eksplicita, kvankam tio rarafoje gravas en praktiko.

Ĉi tiuj estas modestaj oportunejoj, kaj en pli fruaj tagoj de React + TypeScript, ili estis pli utilaj. Sed la tempo ŝanĝiĝis, kaj hodiaŭ tiuj "trajtoj" plej ofte pli ĝenas ol helpas.

Kial Ĝi Iĝas Malpli Populara

Vi povus diri, ke React.FC estas la taskopantalono de TypeScript—multaj poŝoj, plejparte neuzataj.

  1. Implicita children

Ĉiu komponanto ricevas propran children, ĉu ĝi deziras ĝin aŭ ne. Ĉi tio povas konduki al konfuzaj eraroj kiam programistoj supozas, ke children estas validaj nur ĉar la tipo tiel diras. (Spoilero: ili eble ne estas.)

  1. Malsimila kun ĝeneralaj tipoj

Kiam via komponanto bezonas uzi ĝeneralajn tipojn, React.FC emas fari aferojn pli malordaj, ne pli puraj. La sintakso fariĝas kluziva, kaj TypeScript iĝas malpli helpema anstataŭ pli helpema.

  1. Verbostato sen klareco

Skribi const MyComponent: FC<Props> estas pli longa, kaj onidire pli obskura, ol simple tipigi la propraĵojn rekte.

  1. Ne plu necesa

La originalaj kialoj por uzi React.FC—redaktilsubteno, JSX-infero—plejparte estis adresitaj per TypeScript-ĝisdatigoj. Kio iam estis praktika solvo, estas nun nur hereda stilo.

Flanke-Flanke Komparo

Trajto function Komponento() const Komponento: FC
Ĉu inkluzivas children? Nur se deklarita Ĉiam inkluzivita
Subtenas ĝeneralojn? Gracie Ne sen penado
Verboste? Minimale Rimarkeble pli
Redaktilsubteno? Sufiĉa Iome pli bona en specifaj kazoj
Ĉu rekomendita? Jes Ne plu

La Rekomendita Alproksimiĝo

La konsento en la komunumo estas simpla: tipe rekte viajn propraĵojn. Se vi volas, ke via komponanto akceptu children, diru tion. Se ne, ĝi ne faros tion. Tio estas speco de honesto, kiun via estonta memoro aprezos.

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

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

Ĝi estas eksplicita. Ĝi estas facile prizorgebla. Kaj ĝi ne ŝajnigas, ke via komponanto manipulas children, kiam ĝi ne faras.

Ĉu Ekzistas Situacioj Kie FC Ankoraŭ Senpripenseblas?

Foje. Se vi laboras en malnova koda bazo kiu forte fidas je React.FC, daŭrigado de kongrueco eble gravas pli ol tute rekode skribi ĉion. Se vi rapide prototipas komponantojn kaj ne volas zorgi pri tipado de children, FC ankoraŭ povas esti mallongigo.

Sed ĝenerale, tiuj estas la esceptoj, kiuj konfirmas la regulon.

Por Fermi

React.FC ne estas malĝusta. Ĝi simple ne plu necesas. Moderna TypeScript faciligis tipadon de React-komponentoj pli simple kaj pli antaŭvideble sen ĝi.

Do la venontan fojon kiam vi strebos al FC, paŭzu kaj pensu ĉu vi aldonas valoron—aŭ nur pliajn tavolojn. Plej ofte simpla tipeca funkcio servos vin pli bone.

En programaro—kiel en vivo—klareco venkas saĝecon. Kaj malpli da surprizoj kutime signifas malpli da pentoj.

Categories