Reager komponenter - Rekvisitter og tilstande i ReactJS med eksempler

Denne blog på React Components taler om det grundlæggende i komponenter, hvordan de oprettes sammen med hele livscyklussen for reaktionskomponenter.

“I React er alt en komponent”

Hvis du er bekendt med React, skal du have hørt eller læst denne sætning mange gange. Men ved du, hvad det betyder nøjagtigt, og hvordan det bruges? Hvis du ikke gør det, skal du læse denne blog for at lære alt om React-komponenter og de forskellige faser i livscyklussen. Jeg er sikker på, når du er færdig Når du læser denne blog, får du en fuldstændig forståelse af React-komponenter og koncepterne omkring den. Men inden du fortsætter, skal du kigge hurtigt på de emner, jeg vil diskutere:



find det største antal i array java

Hvad er reaktionskomponenter?

Tidligere var udviklerne nødt til at skrive 1000 linjer kode for at udvikle en simpel applikation med en enkelt side. De fleste af disse applikationer fulgte den traditionelle DOM-struktur, og det var meget udfordrende at foretage ændringer i dem og en kedelig opgave for udviklerne.De måtte manuelt søge efter det element, der havde brug for ændringen, og opdatere det i overensstemmelse hermed. Selv en lille fejl ville føre til applikationsfejl. Desuden var opdatering af DOM meget dyrt. Således blev den komponentbaserede tilgang introduceret. I denne tilgang er hele applikationen opdelt i logiske klumper, der kaldes komponenterne. React var en af ​​rammerne, der valgte denne tilgang.Hvis du planlægger at opbygge din karriere inden for webudvikling, vil tidlig start åbne mange muligheder for dig.



Lad os nu forstå, hvad disse komponenter er.

Reaktionskomponenter betragtes som byggestenene i brugergrænsefladen. Hver af disse komponenter findes inden for samme rum, men udføres uafhængigt af hinanden. React-komponenter har deres egen struktur, metoder såvel som API'er. De kan genbruges og kan injiceres i grænseflader efter behov. For at få en bedre forståelse skal du overveje hele brugergrænsefladen som et træ.Her bliver startkomponenten roden, og hver af de uafhængige stykker bliver grene, som yderligere er opdelt i undergrene.



UI Tree - React Components - EdurekaDette holder vores brugergrænseflade organiseret og giver mulighed for, at data og tilstandsændringer logisk strømmer fra roden til grene og derefter til undergrene. Komponenter foretager opkald til serveren direkte fra klientsiden, hvilket gør det muligt for DOM at opdatere dynamisk uden at opdatere siden. Dette skyldes, at reaktionskomponenter er bygget på konceptet med AJAX-anmodninger. Hver komponent har sin egen grænseflade, der kan foretage opkald til serveren og opdatere dem. Da disse komponenter er uafhængige af hinanden, kan hver opdateres uden at påvirke andre eller brugergrænsefladen som helhed.

Vi bruger React.createClass () metode til at oprette en komponent. Denne metode skal sendes til et objektargument, der definerer React-komponenten. Hver komponent skal indeholde nøjagtigt en gengive () metode. Det er den vigtigste egenskab ved en komponent, der er ansvarlig for at analysere HTML i JavaScript, JSX. Dette gengive () returnerer komponentens HTML-repræsentation som en DOM-node. Derfor skal alle HTML-tags være lukket i et lukkende tag inde i gengive () .

Følgende er en eksempelkode til oprettelse af en komponent.



import React fra 'react' import ReactDOM fra 'react-dom' klasse MyComponent udvider React.Component {render () {return (

Din id er {this.state.id}

)}} ReactDOM.render (, document.getElementById ('indhold'))

Stater vs rekvisitter

Reager komponentens livscyklus

React giver forskellige metoder, der underretter, når et bestemt trin i en komponents livscyklus opstår. Disse metoder kaldes livscyklusmetoderne. Disse livscyklusmetoder er ikke særlig komplicerede. Du kan tænke på disse metoder som specialiserede begivenhedshåndterere, der kaldes til forskellige steder i løbet af en komponentliv. Du kan endda tilføje din egen kode til disse metoder for at udføre forskellige opgaver. Når vi taler om komponentens livscyklus, er livscyklussen opdelt i 4 faser. De er:

  1. Indledende fase
  2. Opdaterer fase
  3. Rekvisitter skifter fase
  4. Afmonteringsfase

Hver af disse faser indeholder nogle livscyklusmetoder, som kun er specifikke for dem. Så lad os nu finde ud af, hvad der sker i hver af disse faser.

en. Indledende fase - Den første fase af en React-komponents livscyklus er den indledende fase eller den første gengivelsesfase. I denne fasekomponenten er ved at starte sin rejse og komme til DOM. Denne fase består af følgende metoder, der påberåbes i en foruddefineret rækkefølge.

  1. getDefaultProps (): Denne metode bruges til at specificere standardværdien af this.props . Det kaldes, før din komponent overhovedet oprettes, eller rekvisitter fra forældrene sendes til den.
  2. getInitialState (): Denne metode er vant tilangive standardværdien af denne tilstand inden din komponent oprettes.
  3. componentWillMount (): Dette er den sidste metode, du kan ringe til, før din komponent bliver gengivet i DOM. Men hvis du ringer setState () inde i denne metode gengives din komponent ikke igen.
  4. gengive (): Th metoden er ansvarlig for returnering af en enkelt HTML-rodnode og skal defineres i hver enkelt komponent. Du kan vende tilbage nul eller falsk hvis du ikke vil gengive noget.
  5. componentDidMount (): Når komponenten er gengivet og placeret på DOM, dette metode kaldes. Her kan du udføre enhver DOM-forespørgsel.

b. Opdateringsfase - Når komponenten er føjet til DOM, kan de kun opdatere og gengive igen, når der sker en tilstandsændring. Hver gang tilstanden ændres, kalder komponenten sin gengive () en gang til. Enhver komponent, der er afhængig af output fra denne komponent, kalder også dens gengive () en gang til. Dette gøres for at sikre, at vores komponent viser den nyeste version af sig selv. For at opdatere komponenterne med succes kan følgende metoder påberåbes i den givne rækkefølge:

  1. shouldComponentUpdate (): Ved hjælp af denne metode kan du kontrollere din komponents adfærd med at opdatere sig selv. Hvis du returnerer en true fra denne metode,komponenten opdateres. Ellers hvis denne metode returnerer afalsk, komponenten springer opdateringen over.
  2. componentWillUpdate (): Thans metode kaldes jlige før din komponent er ved at opdatere. I denne metode kan du ikke ændre din komponenttilstand ved at ringe this.setState .
  3. gengive (): Hvis du vender tilbage falsk via shouldComponentUpdate () , koden indeni gengive () vil blive påberåbt igen for at sikre, at din komponent viser sig korrekt.
  4. componentDidUpdate (): Når komponenten er opdateret og gengivet, påberåbes denne metode. Du kan placere en hvilken som helst kode inde i denne metode, som du vil udføre, når komponenten er opdateret.

c. Redskabsfase til rekvisitter - Efter komponenten er blevet gengivet i DOM, den eneste anden gang komponenten opdateres, bortset fra tilstandsændringen, når dens propværdi ændres. Praktisk talt fungerer denne fase svarende til den foregående fase, men i stedet for staten beskæftiger den sig med rekvisitterne. Således har denne fase kun en yderligere metode fra opdateringsfasen.

  1. componentWillReceiveProps (): Denne metode returnerer et argument, der indeholder den nye propværdi, der er ved at blive tildelt komponenten.
    Resten af ​​livscyklusmetoderne opfører sig identisk med de metoder, som vi så i den forrige fase.
  2. shouldComponentUpdate ()
  3. componentWillUpdate ()
  4. gengive ()
  5. componentDidUpdate ()

d.Afmonteringsfasen -Dette er den sidste fase af komponenters livscyklus, hvor komponenten ødelægges og fjernes fuldstændigt fra DOM. Den indeholder kun en metode:

  1. componentWillUnmount (): Når denne metode er påberåbt, fjernes din komponent permanent fra DOM.I denne metode YDu kan udføre oprydningsrelaterede opgaver som f.eks. at fjerne begivenhedslyttere, stoppe timere osv.

Følgende er hele livscyklusdiagrammet:

Dette bringer os til slutningen af ​​bloggen om React Components. Jeg håber, at jeg i denne blog klart kunne forklare, hvad der er React Components, hvordan de bruges. Du kan henvise til min blog på , hvis du vil lære mere om ReactJS.

Hvis du ønsker at blive uddannet i React og selv ønsker at udvikle interessante brugergrænseflader, så tjek af Edureka, et pålideligt online læringsfirma med et netværk på mere end 250.000 tilfredse elever spredt over hele kloden.

Har du et spørgsmål til os? Nævn det i kommentarfeltet, og vi vender tilbage til dig.