Share
Reag komponenter innkapsler deler av brukergrensesnittet. Din hele React Application UI er gjengitt som et tre av mange nestede komponenter. Avhengig av strømmen av applikasjonene, må enkelte komponenter utføre noen oppgaver før og etter gjengivelse så vel som før og etter oppdatering.
Endelig er opprydding og feilhåndtering også viktig. React gir en rekke livscyklusmetoder som du kan overstyre og injisere din egen logikk på rett sted. I denne opplæringen lærer du om livscyklusen til en React-komponent fra vugge til grav, hvilke metoder som er tilgjengelige i hvert trinn, og når det er hensiktsmessig å overstyre dem.
Legg merke til at jeg bruker den moderne ES6-klassestilen i denne opplæringen.
Jeg vil bruke en komponent som heter PopularBar for å illustrere alle livscyklusmetodene og hvordan de oppfører seg. Full kildekoden er tilgjengelig på GitLab.
Den populære linjen inneholder to andre komponenter kalt ClickCounter. Hver ClickCounter komponenten inneholder en knapp med en emoji og viser antall ganger det ble klikket lagt til telleiendommen den mottar fra verten. Her er render () Metode av ClickCounter:
Accentsconagua
gjengivelse () retur ( la clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> This.getTotal () < 100 ? this.getTotal() : "99+" ); PopularBar-komponenten gjør to ClickCounter-komponenter med tommel opp og tommel ned emojis. Merk at hvis "show" -posten er feil, gjør den en tom div. Dette blir viktig senere når vi diskuterer montering og demontering.
gjengi () hvis (! this.props.show) return () komme tilbake ()
Reaktorkomponenter eksisterer når de blir gjengitt av en overordnet komponent eller av rotenapplikasjonen. Men før en komponent kan gjengis, må den bygges (en gang bare) og monteres i den virtuelle DOM (hver gang den legges til den virtuelle DOM).
Ordren av hendelsene er det første komponenten er konstruert, da componentWillMount () Metoden heter, komponenten er montert i den virtuelle DOM, og deretter componentDidMount ()er kalt. Det gir deg mange muligheter til å utføre forskjellige typer initialisering.
Konstruktøren for en komponent vil bli kalt en gang per applikasjon (hvis du oppdaterer siden i nettleseren din, anses den som et nytt program). Her er konstruktøren for PopularBar-komponenten. Det gjør egentlig ikke noe annet enn å ringe super(), som kreves, og logge på konsollen.
klasse PopularBar utvider komponent constructor () super () console.log ('--- PopularBar constructor er her!')Konstruktøren for ClickCounter initierer sin clickCount angi til null:
klassen ClickCounter utvider komponent constructor (rekvisitter) super (rekvisitter) this.state = clickCount: 0 console.log (props.emoji + '=== ClickCounter constructor er her!')
Dette er et perfekt eksempel på en initialisering som må gjøres en gang per applikasjon. Hvis en ClickCounter-komponent er montert flere ganger, bør den beholde klikktellingen.
De componentWillMount () Metoden kalles før komponenten er montert, så det er ingen komponent ennå. Generelt er det ikke for mye som kan gjøres på dette stadiet, med mindre du har noen spesiell initialisering som skjer hver gang komponenten er montert, men selv det kan vente på componentDidMount ()metode.
Her er metoden implementeringer for PopularBar og ClickCounter:
// PopularBar componentWillMount () console.log ('--- PopularBar vil montere. Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter vil montere. Yay ! ') Du kan ringe this.setState () her hvis du vil. Rekvisitaene er åpenbart ikke tilgjengelige.
Her er komponenten allerede montert, og du kan utføre alt arbeid som trenger å få tilgang til komponenten i sammenheng med den virtuelle DOM. Her er metoden implementeringer for PopularBar og ClickCounter. Komponenten eksisterer allerede, så egenskapene (rekvisitter) kan nås og vises.
componentDidMount () console.log ('--- PopularBar gjorde mount. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log this.props.emoji + '=== ClickCounter har montert. count:' + this.props.count) For å oppsummere monteringsseksjonen, la oss se rekkefølgen av hendelser over populæreBar og de to ClickCounter-komponentene den inneholder. For enkelhets skyld viser jeg emoji for hver ClickCounter, slik at de kan skille seg ut.
--- PopularBar konstruktør er her! --- PopularBar vil montere. Jippi! 👍 === ClickCounter constructor er her! 👍 === ClickCounter vil montere. Jippi! 👎 === ClickCounter constructor er her! 👎 === ClickCounter vil montere. Jippi! 👍 === ClickCounter ble montert. telle: 5 👎 === ClickCounter ble montert. telle: 8 --- PopularBar gjorde mount. upCount: 5, nedCount: 8
Først er popularbaren konstruert og dens componentWillMount () Metoden kalles. Deretter, konstruktøren og componentWillMount () metoder for hver ClickCounter-komponent kalles, etterfulgt av componentDidMount () samtaler til begge ClickCounter-komponentene. Endelig, den componentDidMount () Metoden for PopularBar kalles. Samlet sett er strømmen nestet der alle delkomponentene må være fullt montert før den inneholdende komponenten er fullt montert.
Når komponenten er montert, kan den gjengis. Nå og da kan tilstanden til komponenten eller rekvisitter som den mottar fra beholderen, endres. Slike endringer fører til gjenoppretting, men komponenten får en sjanse til å bli varslet og til og med kontrollere om gjengivelsen skal skje eller ikke.
Det er fire metoder involvert i oppdateringsprosessen, og jeg vil dekke dem i rekkefølge.
De componentWillReceiveProps () Metoden kalles når nye rekvisitter mottas fra beholderen. Du har tilgang til dagens rekvisitter via this.props og til neste rekvisitter via nextProps parameter. Her er componentWillReceiveProps () metode for ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter vil motta rekvisitter.' + 'neste rekvisitter:' + nextProps.count)
Du har muligheten til å sjekke hvilke rekvisitter som er endret og endre tilstanden til komponenten hvis du ønsker det. Det er greit å ringe this.setState () her.
De shouldComponentUpdate () er en nøkkel metode. Det kalles når nye rekvisitter blir mottatt (etter componentWillReceiveProps () kalles) eller etter at komponentens tilstand er endret andre steder. Hvis du ikke implementerer denne metoden, vil komponenten gjengis hver gang.
Men hvis du implementerer det og returnerer "false", blir komponenten og dens barnekomponenter ikke gjengitt. Vær oppmerksom på at hvis tilstanden til barnekomponenter er endret, vil de bli gjengitt selv om du alltid returnerer "falsk" fra foreldrenes shouldComponentUpdate ().
Du får tilgang til neste rekvisitter og neste tilstand, så du har all den informasjonen du trenger for å kunne ta en beslutning. ClickCounter-komponenten viser 99+ når tellingen overskrider 99, så det trenger bare å oppdatere hvis tellingen er mindre enn 100. Her er koden:
shouldComponentUpdate (nextProps, nextState) la currTotal = this.getTotal () la shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
De componentWillUpdateMethod () kalles etter komponenten shouldComponentUpdate () bare hvis shouldComponentUpdate () returnert sant. På dette punktet har du både de neste rekvisita og neste tilstand. Du kan ikke endre staten her fordi det vil forårsake shouldComponentUpdate () å bli ringt igjen.
Her er koden:
componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter vil oppdatere' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount)
Til slutt, etter gjengivelsen, er componentDidUpdate () Metoden kalles. Det er greit å ringe this.setState () her fordi gjengivelsen for den forrige tilstandsendringen allerede er fullført.
Her er koden:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter har oppdatert')
La oss se oppdateringsmetodene i aksjon. Jeg vil forårsake to typer oppdateringer. Først vil jeg klikke på tommelen opp-knappen for å utløse en tilstandsendring:
--- PopularBar konstruktør er her! PopularBar.js: 10 --- PopularBar vil montere. Jippi! PopularBar.js: 14 👍 === ClickCounter constructor er her! 👍 === ClickCounter vil montere. Jippi! 👎 === ClickCounter constructor er her! 👎 === ClickCounter vil montere. Jippi! 👍 === ClickCounter ble montert. telle: 5 ClickCounter.js: 20 👎 === ClickCounter ble montert. telle: 8 ClickCounter.js: 20 --- PopularBar gjorde mount. upCount: 5, downCount: 8 👍 === ClickCounter skal oppdatere 👍 === ClickCounter vil oppdatere nextProps.count: 5 nextState.clickCount: 1 👍 === ClickCounter har oppdatert
Legg merke til at nextState.clickCount er 1, som utløser oppdateringssyklusen. Den neste oppdateringen vil bli forårsaket av foreldrene som passerer nye rekvisitter. For å lette dette legger jeg til en liten funksjon som utløser hvert 5. sekund og øker antallet med 20. Her er koden i hovedapp-komponenten som inneholder popularbaren. Endringen vil forplante seg helt ned til ClickCounter.
klasse App utvider komponent constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind ); everyFiveSeconds () la state = this.state state.upCount + = 20 this.setState (state)
Her er utgangen. Legg merke til at ClickCounter willReceiveProps () Metoden er blitt kalt og nextState.clickCount forblir null, men nextProps.Count er nå 25.
--- PopularBar konstruktør er her! --- PopularBar vil montere. Jippi! 👍 === ClickCounter constructor er her! 👍 === ClickCounter vil montere. Jippi! 👎 === ClickCounter constructor er her! 👎 === ClickCounter vil montere. Jippi! 👍 === ClickCounter ble montert. telle: 5 👎 === ClickCounter ble montert. telle: 8 --- PopularBar gjorde mount. upCount: 5, downCount: 8 👍 === ClickCounter vil motta rekvisitter. neste rekvisitter: 25 👍 === ClickCounter skal oppdatere 👍 === ClickCounter vil oppdatere nextProps.count: 25 nextState.clickCount: 0
Komponenter kan demonteres og monteres igjen, og det kan være feil under komponentens livscyklus.
Hvis en komponent ikke gjengis av sin beholder, er den avmontert fra den virtuelle DOM og den umonterte komponentens componentWillUnmount () Metoden kalles. The PopularBar vil ikke gjengi sine ClickCounter-underkomponenter hvis visningen er feil. App-komponenten gjengir popularbaren og sender utstillingsvinduet basert på avkrysningsruten.
Her er Appens render () metode:
gjengivelse () retur ()Populær Bar
Når brukeren avmarkerer avmerkingsboksen, gjengis popularbaren fortsatt, men det gir ikke barnets komponenter, som blir umontert. Her er koden og utgangen:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter vil avmontere :-(') Output: 👍 === ClickCounter vil avmontere :-( 👎 === ClickCounter vil avmontere :-( Det er ingen componentDidUnmount () metode fordi det ikke er noen komponent på dette punktet.
De componentDidCatch () Metoden ble nylig lagt til i React 16. Den er utformet for å hjelpe til med en feil under gjengivelse som tidligere resulterte i uklare feilmeldinger. Nå er det mulig å definere spesielle feilgrensekomponenter som bryter inn en hvilken som helst barnkomponent som kan kaste feil, og feilgrensekomponenten blir bare gjengitt hvis feilen oppstod.
Reaktorkomponenter har en veldefinert livssyklus, og spesielle metoder lar deg blande logikken din og ta til handlinger, kontrollere tilstanden på et meget fint kornnivå, og til og med håndtere feil.
Mesteparten av tiden er dette ikke nødvendig, og du kan bare passere rekvisitter rundt og implementere render () metode, men det er godt å vite at i mer spesialiserte forhold vil du ikke bli stående og stirre på en svart boks.
I løpet av de siste par årene har React vokst i popularitet. Faktisk har vi en rekke elementer på markedet som er tilgjengelige for kjøp, gjennomgang, implementering og så videre. Hvis du leter etter flere ressurser rundt React, ikke nøl med å sjekke dem ut.
