Reager komponenter - Rekvisitter og tilstander i ReactJS med eksempler

“I React er alt en komponent”

Hvis du er kjent med React, må du ha hørt eller lest denne setningen mange ganger. Men vet du hva det betyr nøyaktig og hvordan det brukes? Hvis du ikke gjør det, kan du lese denne bloggen for å lære mer om React-komponenter og de forskjellige fasene i livssyklusen. Jeg er sikker på når du er ferdig Når du leser denne bloggen, vil du ha full forståelse av React-komponenter og konseptene rundt den. Men før du fortsetter, ta en rask titt på emnene jeg skal diskutere:

• Hva er React Components?
• Fordeler med reaktorkomponenter
• Rekvisitter
• Stater
• Stater mot rekvisitter
• Reager komponentens livssyklus

Hva er React Components?

Tidligere måtte utviklerne skrive 1000 kodelinjer for å utvikle en enkel applikasjon på én side. De fleste av disse applikasjonene fulgte den tradisjonelle DOM-strukturen og å gjøre endringer i dem var veldig utfordrende og en kjedelig oppgave for utviklerne.De måtte manuelt søke etter elementet som trengte endringen og oppdatere det deretter. Selv en liten feil vil føre til søknadsfeil. Videre var det veldig dyrt å oppdatere DOM. Dermed ble den komponentbaserte tilnærmingen introdusert. I denne tilnærmingen er hele applikasjonen delt inn i logiske biter som kalles komponentene. React var en av rammene som valgte denne tilnærmingen.Hvis du planlegger å bygge din karriere innen nettutvikling, vil tidlig start åpne mange muligheter for deg.

La oss nå forstå hva disse komponentene er.

Reager komponenter anses som byggesteinene i brukergrensesnittet. Hver av disse komponentene eksisterer i samme rom, men utføres uavhengig av hverandre. React-komponenter har sin egen struktur, metoder så vel som API-er. De er gjenbrukbare og kan injiseres i grensesnitt etter behov. For å få en bedre forståelse, vurder hele brukergrensesnittet som et tre.Her blir startkomponenten roten og hver av de uavhengige brikkene blir grener, som videre er delt inn i undergrener.

Dette holder brukergrensesnittet vårt organisert og lar endringene i data og tilstand logisk strømme fra roten til grenene og deretter til undergrenene. Komponenter ringer til serveren direkte fra klientsiden, slik at DOM kan oppdateres dynamisk uten å oppdatere siden. Dette er fordi reaksjonskomponenter er bygget på konseptet med AJAX-forespørsler. Hver komponent har sitt eget grensesnitt som kan ringe til serveren og oppdatere dem. Siden disse komponentene er uavhengige av hverandre, kan hver enkelt oppdateres uten å påvirke andre eller brukergrensesnittet som helhet.

Vi bruker React.createClass () metode for å lage en komponent. Denne metoden må sendes til et objektargument som definerer React-komponenten. Hver komponent må inneholde nøyaktig en gjengi () metode. Det er den viktigste egenskapen til en komponent som er ansvarlig for å analysere HTML i JavaScript, JSX. Dette gjengi () vil returnere HTML-representasjonen av komponenten som en DOM-node. Derfor må alle HTML-kodene være lukket i en vedlagte tag inne i gjengi () .

Følgende er en eksempelkode for å lage en komponent.

konvertere streng til array php

importer React fra 'react' import ReactDOM fra 'react-dom' klasse MyComponent utvider React.Component {render () {return (
Din ID er {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Stater mot rekvisitter

Reager komponentens livssyklus

React gir forskjellige metoder som varsler når et bestemt trinn i livssyklusen til en komponent oppstår. Disse metodene kalles livssyklusmetodene. Disse livssyklusmetodene er ikke veldig kompliserte. Du kan tenke på disse metodene som spesialiserte hendelsesbehandlere som kalles på forskjellige punkter i løpet av komponentens levetid. Du kan til og med legge til din egen kode i disse metodene for å utføre forskjellige oppgaver. Når vi snakker om komponentens livssyklus, er livssyklusen delt inn i 4 faser. De er:

1. Innledende fase
2. Oppdaterer fase
3. Rekvisitter endrer fase
4. Demonteringsfase

Hver av disse fasene inneholder noen livssyklusmetoder som bare er spesifikke for dem. Så la oss nå finne ut hva som skjer i hver av disse fasene.

en. Innledende fase - Den første fasen av livssyklusen til en React-komponent er den innledende fasen eller den første gjengivelsesfasen. I denne fasen,komponenten er i ferd med å starte reisen og komme seg til DOM. Denne fasen består av følgende metoder som påkalles i en forhåndsdefinert rekkefølge.

1. getDefaultProps (): Denne metoden brukes til å spesifisere standardverdien på this.props . Det blir ringt før komponenten din til og med blir opprettet eller noen rekvisitter fra foreldrene blir sendt til den.
2. getInitialState (): Denne metoden er vant tilspesifisere standardverdien på denne tilstanden før komponenten blir opprettet.
3. componentWillMount (): Dette er den siste metoden du kan ringe før komponenten blir gjengitt i DOM. Men hvis du ringer setState () inne i denne metoden vil ikke komponenten din gjengis på nytt.
4. gjengi (): Th is-metoden er ansvarlig for å returnere en enkelt HTML-node-rot og må defineres i hver komponent. Du kan komme tilbake null eller falsk i tilfelle du ikke vil gjengi noe.
5. componentDidMount (): Når komponenten er gjengitt og plassert på DOM, dette metoden kalles. Her kan du utføre alle DOM-spørringsoperasjoner.

b. Oppdaterer fase - Når komponenten er lagt til DOM, kan de bare oppdateres og gjengis når en tilstandsendring inntreffer. Hver gang tilstanden endres, kaller komponenten sin gjengi () en gang til. Enhver komponent som er avhengig av produksjonen til denne komponenten vil også kalle sin gjengi () en gang til. Dette gjøres for å sikre at komponenten vår viser den nyeste versjonen av seg selv. For å lykkes med å oppdatere komponentene, angis følgende metoder i den angitte rekkefølgen:

1. shouldComponentUpdate (): Ved å bruke denne metoden kan du kontrollere komponentens oppførsel av å oppdatere seg selv. Hvis du returnerer en sann fra denne metoden,komponenten oppdateres. Ellers hvis denne metoden returnerer afalsk, vil komponenten hoppe over oppdateringen.
2. componentWillUpdate (): Thans metode kalles jbare før komponenten din er i ferd med å oppdateres. I denne metoden kan du ikke endre komponenttilstanden din ved å ringe this.setState .
3. gjengi (): Hvis du returnerer falsk via shouldComponentUpdate () , koden inni gjengi () vil bli påkalt igjen for å sikre at komponenten din viser seg riktig.
4. componentDidUpdate (): Når komponenten er oppdatert og gjengitt, blir denne metoden påkalt. Du kan legge inn hvilken som helst kode i denne metoden, som du vil utføre når komponenten er oppdatert.

c. Props Change Phase - Etter komponenten er gjengitt i DOM, den eneste andre gangen komponenten oppdateres, bortsett fra tilstandsendringen, er når prop-verdien endres. Praktisk talt fungerer denne fasen som den forrige fasen, men i stedet for staten handler den om rekvisitter. Dermed har denne fasen bare en ekstra metode fra oppdateringsfasen.

1. componentWillReceiveProps (): Denne metoden returnerer ett argument som inneholder den nye propverdien som skal tildeles komponenten.
   Resten av livssyklusmetodene oppfører seg identisk med metodene som vi så i forrige fase.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. gjengi ()
5. componentDidUpdate ()

d.Avmonteringsfasen -Dette er den siste fasen av komponenters livssyklus der komponenten blir ødelagt og fjernet fra DOM helt. Den inneholder bare en metode:

1. componentWillUnmount (): Når denne metoden er påkalt, blir komponenten fjernet permanent fra DOM.I denne metoden, YDu kan utføre opprydningsrelaterte oppgaver som å fjerne lyttere til hendelser, stoppe tidtakere osv.

Følgende er hele livssyklusdiagrammet:

Dette bringer oss til slutten av bloggen om React Components. Jeg håper i denne bloggen klarte jeg å tydelig forklare hva som er React Components, hvordan de brukes. Du kan henvise til bloggen min på , i tilfelle du vil lære mer om ReactJS.

Hvis du vil bli opplært i React og ønsker å utvikle interessante brukergrensesnitt på egen hånd, så sjekk ut av Edureka, et pålitelig online læringsfirma med et nettverk av mer enn 250 000 fornøyde elever spredt over hele verden.

Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet, så kommer vi tilbake til deg.