Klasse vs funktionelle komponenter i reaktion og den superhemmelige tredje mulighed

Jeg foretrækker tyggegods.

Når jeg begynder med min reaktion, er det spørgsmål, jeg ofte hører, ”hvorfor skulle jeg ikke bare bruge en klassekomponent til alting? Hvorfor overhovedet ikke bryde med funktionelle komponenter? ”

På trods af hvad nogle funktionelle programmering die-hards kan sige, er det ikke nødvendigvis et dårligt spørgsmål. Når alt kommer til alt giver klassekomponenter os så meget mere fleksibilitet, så meget mere potentiale end en simpel, 'stum' komponent. Der er bestemt nogle få gode grunde til, at vi endda gider med funktionelle (eller 'statsløse') komponenter til at begynde med.

Efter nogle graver er svaret ...

Subjektiv.

Så lad os hurtigt gå over de to typer, og hvorfor du måske ønsker at bruge den ene over den anden.

Funktionelle komponenter

Måske bedre kendt i React-samfundet som 'statsløse' komponenter, det er nøjagtigt, hvad det står på dåsen: statsløse funktioner. På grund af dets manglende evne til at have sine egne metoder eller henvise til dette, kan alt, hvad en statsløs komponent virkelig kan opnå, være en gengivelse ved at returnere nogle JSX (eller React.createElement (), hvis du er old school).

De har ingen adgang til dette, så de kan ikke have deres egen tilstand, og de kan heller ikke have livscyklusmetoder af samme grund. For dem har du brug for ...

Klassekomponenter

Brødet og smøret i Reacts rammer, klassekomponenter kan gøre det hele: tilstand, livscyklusmetoder, regelmæssige metoder og gengivelse, alt sammen indpakket i en ryddig klassekrop.

Neat! Hvad skal jeg bruge nu?

Illusionen om valg

Hvilken foruroligende undertekst! Efter at have læst om, hvad hver af disse er, tænker du sandsynligvis "åbenlyst, brug en statsløs komponent, hvis du kun har brug for at gengive noget baseret på rekvisitter!" Og du har ret! Dette er typisk nøjagtigt hvorfor du tænker at bruge en statsløs komponent, men hvad med ydeevnen? Hukommelse?

Disse afhænger hovedsageligt af størrelsen på klassekomponenten. Husk, at begge disse typer skal transpileres, hvilket i sig selv vil påvirke hukommelsen. Det er klart, at en mere detaljeret fil vil bruge mere hukommelse og påvirke ydeevnen mere end en simpel statsløs komponent, som i kraft af det kun kan være så stor, før du sandsynligvis bør revurderes, hvis den kun skulle være en komponent eller mere.

Så hvad med den skræmmende undertekst? Lad os spørge React-ekspert Dan Abramov selv.

Tag dette med et saltkorn, da det er en smule dateret på dette tidspunkt, og opdateringer om sagen er vanskelige at grave op, og det er blevet sagt af andre udviklere i React-teamet, at der er foretaget nogle forbedringer af funktionelle komponenters hastighed. Der har også været tale om i lang tid om at optimere statsløse komponenter, så de viser sig at være mere nyttige på linjen.

Efter en selvstændig benchmark-test ser det ud til, at funktionelle komponenter har potentialet til at køre ca. 20% hurtigere i gennemsnit, hvilket ikke er noget at ryste på.

Og alligevel ... der er en anden måde ...

Spoiler Alert: det virkelige er JavaScript

Jeg skylder denne, ærligt talt blæse observation af Philippe Lehoux 'Medium Artikel 45% hurtigere reaktion funktionelle komponenter, nu. Årsagen til, at funktionelle komponenter ikke med det samme er meget hurtigere end klassekomponenter, er fordi de stadig udvider React.Component og derved stadig indlæses i en logik for en klassekomponent!

Så for at fremskynde disse dumme komponenter, er vi nødt til at omgå den unødvendige bagage, som React.Component rækker os, og hvis vi har brug for at afstå fra React, er svaret godt JS.

Boom.

Jeg ved. Det er så enkelt, men alligevel så smukt. I mine benchmark-tests slog det en normal klassekomponent ud med 51%. 51!

Lad os se på transpilationen og se, hvorfor det er.

Direkte funktionsopkald kontra komponentinstantiation

I vores normale komponentinitialisering har vi indlejret .createElement () opkald for at opbygge vores DOM-træ, men med direkte funktionskald kan vi simpelthen indtaste returneringsværdien for vores funktion.

Så hvad er sandheden?

(Undskyld ikke undskyld)

I slutningen af ​​dagen, hvad er det der er takeaways?

  1. Klasserne er mere kraftfulde og fleksible,
  2. Statsløse er lidt hurtigere (og kræver mindre indtastning!) Med nogle løfter om optimeringsvinden,
  3. Der er en (lidt uprøvet) speed-hack tilgængelig for dig, hvis du har brug for at skubbe ud al den ydelse, du kan få,
  4. I slutningen af ​​dagen skal du gøre hvad som er det blotte minimum for komponenten. Det er sandsynligvis det rigtige valg.