Mastering av reaktiva livscykelmetoder

Översikt

Reaktorkomponenter inkapslar delar av användargränssnittet. Din fullständiga React Application UI är gjord som ett träd av många kapslade komponenter. Beroende på flödet av applikationerna måste enskilda komponenter utföra vissa uppgifter före och efter återgivning såväl som före och efter uppdatering.

Slutligen är rengöring och felhantering också viktig. React ger en rad livscykelmetoder som du kan åsidosätta och injicera din egen logik på rätt ställe. I denna handledning lär du dig information om livscykeln för en React-komponent från vagga till grav, vilka metoder som finns tillgängliga i varje steg och när det är lämpligt att åsidosätta dem.

Observera att jag använder den moderna ES6-klassstilen i denna handledning.

The PopularBar

Jag kommer att använda en komponent som heter PopularBar för att illustrera alla livscykelmetoder och hur de beter sig. Den fullständiga källkoden är tillgänglig på GitLab.

Den populära baren innehåller två andra komponenter som heter ClickCounter. Varje ClickCounter komponenten innehåller en knapp med en emoji och visar hur många gånger den klickades till den räkneegenskap den mottar från sin värd. Här är göra() metod av ClickCounter:

 render () returnera (  låt clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)>  This.getTotal () < 100 ? this.getTotal() : "99+"  );  

PopularBar-komponenten ger två ClickCounter-komponenter med tummen upp och tummen ner emojis. Observera att om "show" -proppen är falsk, gör den en tom div. Detta kommer att vara viktigt senare när vi diskuterar montering och demontering.

 render () if (! this.props.show) return (
) lämna tillbaka (
)

Montering

Reaktorkomponenter finns när de görs av en överordnad komponent eller av root-applikationen. Men innan en komponent kan göras måste den konstrueras (en gång) och monteras i virtuell DOM (varje gång den läggs till i den virtuella DOM).

Ordningen av händelser är den första komponenten är konstruerad, då componentWillMount () Metoden heter, komponenten är monterad i virtuell DOM och sedan componentDidMount ()kallas. Det ger dig gott om möjligheter att utföra olika typer av initialisering. 

Konstruktör

Konstruktören för en komponent kommer att ringas en gång per applikation (om du uppdaterar sidan i din webbläsare anses den vara en ny applikation). Här är konstruktören för PopularBar-komponenten. Det gör inte riktigt något annat än att ringa super(), vilket krävs och logga in i konsolen.

klass PopularBar utökar komponent constructor () super () console.log ('--- PopularBar konstruktör är här!')

Konstruktören för ClickCounter initierar sin Clickcount Ange till noll:

class ClickCounter utökar komponent constructor (rekvisita) super (rekvisita) this.state = clickCount: 0 console.log (props.emoji + '=== ClickCounter konstruktör är här!') 

Detta är ett perfekt exempel på en initialisering som måste göras en gång per applikation. Om en ClickCounter-komponent är monterad flera gånger, borde den behålla sin klickräkning.

ComponentWillMount

De componentWillMount () Metoden heter innan komponenten är monterad, så det finns ingen komponent än. I allmänhet finns det inte för mycket som kan göras på detta stadium, om du inte har någon speciell initialisering som händer varje gång komponenten är monterad, men även det som kan vänta till componentDidMount ()metod. 

Här är metoden implementeringar för PopularBar och ClickCounter:

 // PopularBar componentWillMount () console.log ('--- PopularBar kommer mount. Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter kommer att monteras. Yay ! ') 

Du kan ringa this.setState () här om du vill ha det. Rekvisita är uppenbarligen inte tillgängliga.

ComponentDidMount

Här är komponenten redan monterad, och du kan utföra något arbete som behöver komma åt komponenten i samband med den virtuella DOM. Här är metoden implementeringar för PopularBar och ClickCounter. Komponenten finns redan, så dess egenskaper (rekvisita) kan nås och visas.

 componentDidMount () console.log ('--- PopularBar gjorde mount. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log this.props.emoji + '=== ClickCounter monterade. count:' + this.props.count) 

För att sammanfatta monteringsdelen, låt oss se ordningsföljden över PopularBar och de två ClickCounter-komponenterna den innehåller. För din bekvämlighet visar jag emoji för varje ClickCounter, så att de kan särskiljas. 

--- PopularBar konstruktör är här! --- PopularBar kommer att montera. Jippie! 👍 === ClickCounter konstruktör är här! 👍 === ClickCounter kommer att monteras. Jippie! 👎 === ClickCounter konstruktör är här! 👎 === ClickCounter kommer att monteras. Jippie! 👍 === ClickCounter monterade. räkna: 5 👎 === ClickCounter monterade. räkna: 8 --- PopularBar monterade. upCount: 5, downCount: 8

Först är popularbaren konstruerad och dess componentWillMount () Metoden heter. Därefter konstruktören och componentWillMount () metoderna för varje ClickCounter-komponent kallas, följt av componentDidMount () samtal till båda ClickCounter-komponenterna. Slutligen, den componentDidMount () Metoden för PopularBar heter. Sammantaget är flödet näst, där alla delkomponenter måste vara fullt monterade innan deras innehållande komponent är fullt monterad.

Uppdaterande

När komponenten är monterad kan den göras. Då och då kan komponentens tillstånd eller rekvisita som den mottar från behållaren ändras. Sådana förändringar leder till återavkastning, men komponenten får en chans att bli underrättad och även kontrollera om rendering ska hända eller inte. 

Det finns fyra metoder som är inblandade i uppdateringsprocessen, och jag täcker dem i ordning.

ComponentWillReceiveProps

De componentWillReceiveProps () Metoden heter när nya rekvisita tas emot från behållaren. Du har tillgång till nuvarande rekvisita via this.props och till nästa rekvisita via nextProps parameter. Här är componentWillReceiveProps () Metoden för ClickCounter.

 componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter kommer att få rekvisita.' + 'nästa rekvisita:' + nextProps.count) 

Du har möjlighet här för att kontrollera vilka rekvisita som har ändrats och ändra komponentens tillstånd om du vill. Det är OK att ringa this.setState () här.

ShouldComponentUpdate

De shouldComponentUpdate () är en nyckelmetod. Det kallas när antingen nya rekvisita tas emot (efter componentWillReceiveProps () kallas) eller efter att komponentens tillstånd är modifierat någon annanstans. Om du inte implementerar den här metoden kommer komponenten att återställas varje gång.

Men om du implementerar det och returnerar "false", kommer komponenten och dess barnkomponenter inte att bli gjorda. Observera att om barnkomponenternas status är modifierad, kommer de att återställas även om du alltid återkommer "falsk" från förälderns shouldComponentUpdate ().

Du får tillgång till nästa rekvisita och nästa tillstånd, så du har all information som behövs för att fatta ett beslut. ClickCounter-komponenten visar 99+ när dess räkning överstiger 99, så det behöver uppdateras endast om räkningen är mindre än 100. Här är koden:

 shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () låt shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate 

ComponentWillUpdate

De componentWillUpdateMethod () kallas efter komponenten shouldComponentUpdate () bara om shouldComponentUpdate () återvände sant. Vid denna tidpunkt har du både nästa rekvisita och nästa tillstånd. Du kan inte ändra staten här eftersom det kommer att orsaka shouldComponentUpdate () att ringas igen.

Här är koden:

 componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter uppdaterar' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount

ComponentDidUpdate

Slutligen, efter rendering, den componentDidUpdate () Metoden heter. Det är OK att ringa this.setState () här eftersom återgivningen för den tidigare tillståndsändringen redan har genomförts.

Här är koden:

 componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter uppdaterade')

Låt oss se uppdateringsmetoderna i aktion. Jag kommer att orsaka två typer av uppdateringar. Först kommer jag att klicka på tummen upp-knappen för att utlösa en tillståndsändring:

--- PopularBar konstruktör är här! PopularBar.js: 10 --- PopularBar kommer att montera. Jippie! PopularBar.js: 14 👍 === ClickCounter konstruktör är här! 👍 === ClickCounter kommer att monteras. Jippie! 👎 === ClickCounter konstruktör är här! 👎 === ClickCounter kommer att monteras. Jippie! 👍 === ClickCounter monterade. räkna: 5 ClickCounter.js: 20 👎 === ClickCounter monterade. räkna: 8 ClickCounter.js: 20 --- PopularBar monterade. upCount: 5, downCount: 8 👍 === ClickCounter ska uppdatera 👍 === ClickCounter kommer att uppdatera nextProps.count: 5 nextState.clickCount: 1 👍 === ClickCounter har uppdaterat 

Observera att nextState.clickCount är 1, vilket utlöser uppdateringscykeln. Nästa uppdatering kommer att orsakas av förälder som passerar nya rekvisita. För att underlätta detta lägger jag till en liten funktion som utlöses var 5: e sekund och ökar räkningen med 20. Här är koden i huvudapp-komponenten som innehåller PopularBar. Ändringen kommer att spridas hela vägen ner till ClickCounter.

klass App utökar komponent constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 );  everyFiveSeconds () låt state = this.state state.upCount + = 20 this.setState (state) 

Här är utgången. Observera att ClickCounter willReceiveProps () Metoden har kallats och nextState.clickCount förblir noll, men nextProps.Count är nu 25.

--- PopularBar konstruktör är här! --- PopularBar kommer att montera. Jippie! 👍 === ClickCounter konstruktör är här! 👍 === ClickCounter kommer att monteras. Jippie! 👎 === ClickCounter konstruktör är här! 👎 === ClickCounter kommer att monteras. Jippie! 👍 === ClickCounter monterade. räkna: 5 👎 === ClickCounter monterade. räkna: 8 --- PopularBar monterade. upCount: 5, downCount: 8 👍 === ClickCounter kommer att få rekvisita. nästa rekvisita: 25 👍 === ClickCounter ska uppdatera 👍 === ClickCounter kommer att uppdatera nextProps.count: 25 nextState.clickCount: 0 

Avmontering och felhantering

Komponenterna kan demonteras och monteras igen, och det kan finnas fel under en komponents livscykel.

Komponenten kommer att avmonteras

Om en komponent inte gjorts av dess behållare, är den ommonterad från den virtuella DOM och den ommonterade komponentens componentWillUnmount () Metoden heter. PopularBar kommer inte att göra sina ClickCounter-underkomponenter om showen är falsk. App-komponenten gör PopularBar och skickar showen baserat på kryssrutan.

Här är Appens göra() metod:

 render () returnera ( 

Populär Bar

)

När användaren avmarkerar kryssrutan återges fortfarande PopularBar, men det gör inte dess barnkomponenter, som blir ommonterade. Här är koden och utgången:

 componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter kommer att demontera :-(') Output: 👍 === ClickCounter kommer att avmontera :-( 👎 === ClickCounter kommer att demontera :-( 

Det finns inget componentDidUnmount () metod eftersom det inte finns någon komponent vid denna punkt.

ComponentDidCatch

De componentDidCatch () Metoden tillsattes nyligen i Reakt 16. Det är utformat för att hjälpa till med ett fel under återgivning som tidigare resulterat i obskura felmeddelanden. Nu är det möjligt att definiera speciella felgränskomponenter som sätter in alla barnkomponenter som kan kasta fel och felgränskomponenten kommer endast att göras om felet uppstod.

Slutsats

Reaktorkomponenterna har en väldefinierad livscykel och specialmetoder låter dig interjekta din logik och vidta åtgärder, kontrollera tillståndet på en mycket fin kornad nivå och till och med hantera fel.

För det mesta krävs det inte, och du kan bara passera rekvisita runt och genomföra göra() metod, men det är bra att veta att i mer specialiserade omständigheter kommer du inte att lämnas stirra på en svart låda.

Under de senaste åren har React vuxit i popularitet. Faktum är att vi har ett antal objekt på marknaden som är tillgängliga för köp, granskning, genomförande och så vidare. Om du letar efter ytterligare resurser runt React, tveka inte att kolla in dem.