React Components - Props and States in ReactJS met voorbeelden

'In React is alles een onderdeel'

Als je bekend bent met React, dan moet je deze zin vaak hebben gehoord of gelezen. Maar weet u wat het precies betekent en hoe het wordt gebruikt? Als je dat niet doet, lees dan deze blog om alles te weten te komen over React-componenten en de verschillende fasen in de levenscyclus. Ik weet het zeker tegen de tijd dat je klaar bent Als je deze blog leest, heb je een volledig begrip van React-componenten en de concepten eromheen. Maar voordat u verder gaat, bekijkt u snel de onderwerpen die ik zal bespreken:

c ++ type conversie

• Wat zijn React-componenten?
• Voordelen van React-componenten
• Rekwisieten
• Staten
• Staten versus rekwisieten
• React Component Lifecycle

Wat zijn React-componenten?

Eerder moesten de ontwikkelaars 1000 regels code schrijven voor het ontwikkelen van een eenvoudige applicatie met één pagina. De meeste van die applicaties volgden de traditionele DOM-structuur en het aanbrengen van wijzigingen daarin was een zeer uitdagende en een vervelende taak voor de ontwikkelaars.Ze moesten handmatig zoeken naar het element dat de wijziging nodig had en het dienovereenkomstig bijwerken. Zelfs een kleine fout zou ertoe leiden dat de applicatie mislukt. Bovendien was het updaten van DOM erg duur. Zo werd de op componenten gebaseerde benadering geïntroduceerd. Bij deze benadering wordt de gehele applicatie verdeeld in logische brokken die de componenten worden genoemd. React was een van de kaders die voor deze aanpak koos.Als u van plan bent om uw carrière in webontwikkeling uit te bouwen, biedt een vroege start veel kansen voor u.

Laten we nu eens kijken wat deze componenten zijn.

React-componenten worden beschouwd als de bouwstenen van de gebruikersinterface. Elk van deze componenten bestaat binnen dezelfde ruimte, maar wordt onafhankelijk van elkaar uitgevoerd. React-componenten hebben hun eigen structuur, methoden en API's. Ze zijn herbruikbaar en kunnen naar behoefte in interfaces worden geïnjecteerd. Beschouw de hele gebruikersinterface als een boom om een ​​beter begrip te krijgen.Hier wordt de startcomponent de wortel en elk van de onafhankelijke stukken wordt takken, die verder worden onderverdeeld in zijtakken.

Dit houdt onze gebruikersinterface georganiseerd en zorgt ervoor dat de gegevens en statuswijzigingen logisch van de wortel naar de takken en vervolgens naar de subvertakkingen stromen. Componenten bellen rechtstreeks vanaf de client naar de server, waardoor de DOM dynamisch kan updaten zonder de pagina te vernieuwen. Dit komt omdat react-componenten zijn gebouwd op het concept van AJAX-verzoeken. Elke component heeft zijn eigen interface die oproepen naar de server kan plaatsen en deze kan bijwerken. Aangezien deze componenten onafhankelijk van elkaar zijn, kunnen ze allemaal worden vernieuwd zonder dat dit gevolgen heeft voor anderen of de gebruikersinterface als geheel.

We gebruiken React.createClass () methode om een ​​component te maken. Aan deze methode moet een objectargument worden doorgegeven dat de React-component zal definiëren. Elk onderdeel moet er precies één bevatten render () methode. Het is de belangrijkste eigenschap van een component die verantwoordelijk is voor het ontleden van de HTML in JavaScript, JSX. Deze render () retourneert de HTML-weergave van de component als een DOM-knooppunt. Daarom moeten alle HTML-tags worden ingesloten in een omsluitende tag in de render () .

Hieronder volgt een voorbeeldcode voor het maken van een component.

import React van 'react' importeer ReactDOM van 'react-dom' class MyComponent breidt React.Component {render () {return (
Uw id is {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Staten versus rekwisieten

React Component Lifecycle

React biedt verschillende methoden die aangeven wanneer een bepaalde fase in de levenscyclus van een component zich voordoet. Deze methoden worden de levenscyclusmethoden genoemd. Deze levenscyclusmethoden zijn niet erg ingewikkeld. U kunt deze methoden zien als gespecialiseerde event-handlers die op verschillende punten tijdens de levensduur van een component worden aangeroepen. U kunt zelfs uw eigen code aan deze methoden toevoegen om verschillende taken uit te voeren. Over de levenscyclus van het onderdeel gesproken, de levenscyclus is opgedeeld in 4 fasen. Zij zijn:

1. Begin fase
2. Bijwerkfase
3. Rekwisieten veranderen van fase
4. Fase ontkoppelen

Elk van deze fasen bevat enkele levenscyclusmethoden die alleen voor hen specifiek zijn. Laten we nu eens kijken wat er tijdens elk van deze fasen gebeurt.

een. Begin fase - De eerste fase van de levenscyclus van een React-component is de initiële fase of initiële renderfase. In deze fasehet onderdeel staat op het punt zijn reis te beginnen en zijn weg naar de DOM te vinden. Deze fase bestaat uit de volgende methoden die worden aangeroepen in een vooraf gedefinieerde volgorde.

1. getDefaultProps (): Deze methode wordt gebruikt om de standaardwaarde van dit. rekwisieten . Het wordt aangeroepen voordat uw component zelfs maar is gemaakt of er rekwisieten van de ouder in worden doorgegeven.
2. getInitialState (): Deze methode is gewendspecificeren de standaardwaarde van deze.staat voordat uw component is gemaakt.
3. componentWillMount (): Dit is de laatste methode die u kunt aanroepen voordat uw component wordt weergegeven in de DOM. Maar als je belt setState () binnen deze methode zal je component niet opnieuw renderen.
4. render (): Th Deze methode is verantwoordelijk voor het retourneren van een enkel HTML-rootknooppunt en moet in elk onderdeel worden gedefinieerd. U kunt terugkeren nul of false voor het geval u niets wilt weergeven.
5. componentDidMount (): Zodra de component is gerenderd en op de DOM is geplaatst, wordt dit methode wordt genoemd. Hier kunt u alle DOM-querybewerkingen uitvoeren.

b. Bijwerkfase - Zodra de component aan de DOM is toegevoegd, kunnen ze alleen bijwerken en opnieuw renderen wanneer er een statuswijziging optreedt. Elke keer dat de status verandert, roept de component zijn render () nog een keer. Elke component die afhankelijk is van de uitvoer van deze component, zal ook zijn render () nog een keer. Dit wordt gedaan om ervoor te zorgen dat onze component de nieuwste versie van zichzelf weergeeft. Om de status van de componenten met succes bij te werken, worden de volgende methoden in de opgegeven volgorde aangeroepen:

1. shouldComponentUpdate (): Met deze methode kunt u bepalen hoe uw component zichzelf bijwerkt. Als u van deze methode een true retourneert,het onderdeel wordt bijgewerkt. Anders als deze methode eenfalse, zal de component de update overslaan.
2. componentWillUpdate (): Tzijn methode heet jvoordat uw component op het punt staat te updaten. Bij deze methode kunt u uw componentstatus niet wijzigen door te bellen this.setState .
3. render (): Als u false via shouldComponentUpdate () , de code erin render () wordt opnieuw aangeroepen om ervoor te zorgen dat uw component zichzelf correct weergeeft.
4. componentDidUpdate (): Zodra de component is bijgewerkt en weergegeven, wordt deze methode aangeroepen. U kunt elke code in deze methode plaatsen, die u wilt uitvoeren zodra de component is bijgewerkt.

c. Rekwisieten veranderen fase - Na de component is weergegeven in de DOM, de enige andere keer dat de component wordt bijgewerkt, afgezien van de statusverandering, is wanneer de prop-waarde verandert. Praktisch werkt deze fase vergelijkbaar met de vorige fase, maar in plaats van de staat, gaat het om de rekwisieten. Deze fase heeft dus slechts één aanvullende methode uit de updatefase.

1. componentWillReceiveProps (): Deze methode retourneert één argument dat de nieuwe prop-waarde bevat die op het punt staat aan de component te worden toegewezen.
   De rest van de levenscyclusmethoden gedragen zich identiek aan de methoden die we in de vorige fase hebben gezien.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

d.De ontkoppelingsfase -Dit is de laatste fase van de levenscyclus van componenten waarin de component wordt vernietigd en volledig uit de DOM wordt verwijderd. Het bevat slechts één methode:

1. componentWillUnmount (): Zodra deze methode is aangeroepen, wordt uw component definitief uit de DOM verwijderd.Bij deze methode YU kunt alle opschoongerelateerde taken uitvoeren, zoals het verwijderen van gebeurtenislisteners, het stoppen van timers, enz.

Hieronder volgt het volledige levenscyclusdiagram:

Dit brengt ons bij het einde van de blog over React Components. Ik hoop dat ik in deze blog duidelijk heb kunnen uitleggen wat React Components zijn, hoe ze worden gebruikt. U kunt mijn blog raadplegen op , voor het geval je meer wilt weten over ReactJS.

Als je getraind wilt worden in React en zelf interessante UI's wilt ontwikkelen, bekijk dan de door Edureka, een vertrouwd online leerbedrijf met een netwerk van meer dan 250.000 tevreden leerlingen verspreid over de hele wereld.

Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte en we nemen contact met u op.