Eng Aféierung fir React: Ënnerscheed tëscht Klassekomponent a Funktionnéierungskomponent

Sidd Dir nei a reagéiert? Wëllt Dir eppes Neies a 5 Minutten oder manner léieren? Loosst eis iwwer Reaktiounskomponent léieren.

Wat ass e Komponent?

Faust vun allem, ier mer déif an dëst Thema goen, solle mer wësse wat en Komponent wierklech ass.

E Komponent (a React) géif als Block oder Deel vun eiser App beschriwwe ginn, déi am ganze Projet kéint weiderbenotzt ginn (an anerer, vläicht), et ass normalerweis mat engem UI Element a sengem Behuelen verwandt.

Elo, ugeholl datt Dir d'Basis wësst, lass eis iwwer déi zwou Zorte vu Komponenten iwwerpréiwen, déi mir an engem React-Projet, Class Components a Functional Components kënne kreéieren.

Klass Komponent

Dëst gëtt och Basiskomponent genannt. Zënter ECMAScript 2015, Mir hunn "Klass" am Javascript. React benotzt dëse Syntax fir e stateful Komponent mat Liewenszyklus ze kreéieren. De Staat gëtt allgemeng benotzt fir d'Behuele vun eise Komponent oder senge Kanner z'änneren.

Loosst eis dëse Code kraken. Hei hu mir eng "JS Klass" déi d'Funktionalitéit vum React.Component ierwen, duerno erkläre mir säi Konstruktor deen d'Annschnëtt als Argument kritt huet. Als nächst wäerte mir super ruffen, fir d'Donnéeën un den Elterenklass Komponent ze weiderginn, dat ass erfuerderlech wann mir dës Zort Komponent erstellen.

De "Requisiten" ass en Objet deen all Attributer krut, déi mir d'Komponente als Tag benotzen.

D'Lamp Komponent huet Basis Propositioun, et mécht en HTML Block mat engem Text an engem Knäppchen.

Klickt op de Knäppchenschalter schalt d'Luucht un oder aus, hei ass wou eise Staat an d'Spill kommt, an der Linn 4, initialiséiere mir den Zoustand vun der Lamp, an dono deklaréiere mir d'Methode switchLight, et dréit de Staat vun eiser Luucht.

dësem "Staat" ass en Objet mat e puer Eegeschaften déi an der Zäit vun der Klass Ausféierung änneren. Et sollt net direkt geännert ginn, awer d'SetState Method.

Dir kënnt de Staat esou änneren:

Funktionell Komponent

Elo, wa mir e puer minimal, einfach a statesch Komponent wëllen opbauen, wäert dëst Iech hëllefen de benotzte Code ze reduzéieren an de DRY Prinzip méi einfach ze maachen. Déi funzional Komponent ass eng Javascript Funktioun déi e puer Jxs Elementer zréckbréngt.

Loosst eis dëst Beispill vun engem Bulb Komponent kontrolléieren.

Genau hei hu mir eng regulär Funktioun, et kritt en zerstéiert Objet mat enger Eegeschafte mam Numm lampState, et dréit sech op eng lokal Variabel, a mir evaluéieren ob et richteg oder falsch ass fir en aneren img Tag zréckzekréien.

Elo kënne mir et an der Lampekomponent benotzen fir ze weisen wéi hir gutt zesumme kënne schaffen.

Dat ass et, wann Dir op de Knäppche klickt, ännert d'Bild vun der ageschaltter Luuchte.

Wat iwwer Hooks?

Hooks sinn eng Upëff Feature déi Iech de Staat a funktionnele Komponente benotze kann. Dëst muss mat méi Detailer erkläert ginn, well mir musse méi déif an d'Reaktioun ze verdauen, an och, ech mengen, et verdéngt säin eegene Artikel.

Merci fir liesen, wann Dir gär hutt oder net, gitt mir Iech e Feedback .-