Reactie: Het verschil tussen de klassecomponent en de functionele component

Heb je een nieuwe relatie? Wil je in minder dan 5 minuten iets nieuws leren? Laten we eens kijken naar de reactiecomponent.

Wat is een component?

Ten eerste moeten we, voordat we dieper op dit onderwerp ingaan, precies weten wat de bestanddelen zijn.

De component (reactie) wordt gedefinieerd als een blok of programma dat kan worden hergebruikt in het hele programma (en niet in andere), meestal geassocieerd met het uI-element en zijn gedrag.

Nu u de basis kent, gaan we kijken naar twee soorten componenten die u kunt maken in React, Class Component en Functional Components.

Het klasseonderdeel

Dit wordt het hoofdonderdeel genoemd. We hebben een "klasse" in javascript sinds ECMAScript 2015. React gebruikt deze syntaxis om een ​​statuscomponent met een levenscyclus te creëren. De staat wordt vaak gebruikt om het gedrag van onze kiezers of hun kinderen te veranderen.

Laten we deze code breken. Hier hebben we een "JS-klasse" die de functie van React.Component erft, dus we verklaren een constructor die rekwisieten als argument accepteert. Vervolgens noemen we de gegevens, we moeten dit type component maken om de gegevens door te geven aan de bovenliggende klasse-componenten.

"Requisite" is een object dat alle kenmerken ontvangt die we gebruiken als component-tag.

De lampcomponent heeft een basisvoorstel dat voorziet in een HTML-blok met tekst en knoppen.

Door de lichtschakelaar aan of uit te zetten, is onze positie in het spel, in regel 4 starten we de lamppositie en dan verklaren we de verlichtingsmethode, die de positie verandert. van onze lamp.

deze "toestand" is een object met enkele eigenschappen die veranderen tijdens de uitvoering van de cursus. Het mag niet rechtstreeks worden gewijzigd, maar de methode setState.

Je kunt de status als volgt wijzigen:

Functioneel onderdeel

Als we nu een minimale, eenvoudige en staatloze component willen maken, zal dit u helpen de hoeveelheid gebruikte code te verminderen en het DRY-principe gemakkelijker te maken. De functionele component is een javascript-functie die enkele Jxs retourneert.

Overweeg een voorbeeld van een lampcomponent.

Hier hebben we een persistente functie die een beschadigd object genaamd LampState krijgt, het wordt een lokale variabele en evalueert of de terugkeer van een andere afbeeldingstag correct is.

We zullen het nu gebruiken om te laten zien hoe de lampcomponent kan samenwerken.

Dit verandert het beeld van de lamp wanneer je op de knop drukt.

Hoe zit het met haken?

Haken zijn een aankomende functie waarmee u de positie in een functionele component kunt gebruiken. Dit moet in meer detail worden uitgelegd omdat we dieper in de reactie moeten duiken en ik denk dat het zijn eigen artikel verdient.

Bedankt voor het lezen, en of je het leuk vindt of niet, laat me weten wat je ervan vindt. -