Share
Reactieve componenten inkapselen delen van de gebruikersinterface. De volledige gebruikersinterface van React wordt weergegeven als een structuur met veel geneste componenten. Afhankelijk van de stroom van de applicaties, moeten individuele componenten enkele taken uitvoeren voor en na het renderen, evenals voor en na het bijwerken.
Ten slotte is opruimen en foutafhandeling ook belangrijk. React biedt een hele reeks lifecycle-methoden die u kunt overbruggen en uw eigen logica op de juiste plaats kunt injecteren. In deze tutorial leert u over de levenscyclus van een React-component van wieg tot graf, welke methoden beschikbaar zijn in elke fase en wanneer het gepast is om ze op te heffen.
Merk op dat ik de moderne ES6-klassenstijl gebruik in deze zelfstudie.
Ik zal een component genaamd de PopularBar gebruiken om alle lifecycle-methoden te illustreren en hoe ze zich gedragen. De volledige broncode is beschikbaar op GitLab.
De populaire balk bevat twee andere componenten genaamd ClickCounter. Elk ClickCounter component bevat een knop met een emoji en geeft het aantal keren aan waarop de klik is toegevoegd aan de telling-eigenschap die het van zijn host ontvangt. Hier is de render () methode van ClickCounter:
Accentsconagua
render () retour ( let clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> This.getTotal () < 100 ? this.getTotal() : "99+" ); Het onderdeel PopularBar geeft twee ClickCounter-componenten weer met emoji's met duim omhoog en met duim omlaag. Merk op dat als de "show" prop false is, dit een lege div rendert. Dit zal later van belang zijn wanneer we het monteren en demonteren bespreken.
render () if (! this.props.show) terug () return ()
Reactieve componenten bestaan wanneer ze worden weergegeven door een bovenliggende component of door de roottoepassing. Maar voordat een component kan worden gerenderd, moet het worden geconstrueerd (eenmalig) en worden ingevoegd in de virtuele DOM (elke keer dat het wordt toegevoegd aan de virtuele DOM).
De volgorde van gebeurtenissen is dat eerst het onderdeel is geconstrueerd, daarna het componentWillMount () methode wordt aangeroepen, het onderdeel wordt in de virtuele DOM gemount, en vervolgens de componentDidMount ()wordt genoemd. Dat biedt u voldoende mogelijkheden om verschillende soorten initialisatie uit te voeren.
De constructor voor een component wordt één keer per toepassing aangeroepen (als u de pagina in uw browser vernieuwt, wordt deze als een nieuwe toepassing beschouwd). Hier is de constructor voor de component PopularBar. Het doet niet echt iets anders dan bellen super(), die vereist is en log in op de console.
class PopularBar breidt Component constructor () super () console.log ('--- constructeur PopularBar is hier!')De constructor voor ClickCounter initialiseert zijn clickCount staat op nul:
class ClickCounter breidt Component constructor (props) super (props) this.state = clickCount: 0 console.log (props.emoji + '=== ClickCounter constructor is hier!')
Dit is een perfect voorbeeld van een initialisatie die één keer per applicatie moet worden uitgevoerd. Als een ClickCounter-component meerdere keren is gekoppeld, moet het het aantal klikken behouden.
De componentWillMount () methode wordt aangeroepen voordat het onderdeel is gemount, dus er is nog geen component. Over het algemeen is er niet teveel dat kan worden gedaan in deze fase, tenzij je een speciale initialisatie hebt die elke keer dat het component wordt gemount, plaatsvindt, maar zelfs dat kan wachten op de componentDidMount ()methode.
Hier zijn de methode-implementaties voor PopularBar en ClickCounter:
// PopularBar componentWillMount () console.log ('--- PopularBar zal koppelen. Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter zal mount. Yay ! ') Je kan bellen this.setState () hier als je wilt. De rekwisieten zijn duidelijk niet toegankelijk.
Hier is het onderdeel al gekoppeld en kunt u elk werk uitvoeren dat toegang moet hebben tot het onderdeel in de context van de virtuele DOM. Hier zijn de methode-implementaties voor de PopularBar en de ClickCounter. Het onderdeel bestaat al, dus de eigenschappen (rekwisieten) kunnen worden geopend en weergegeven.
componentDidMount () console.log ('--- PopularBar heeft mount. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log ( this.props.emoji + '=== ClickCounter heeft gemount. count:' + this.props.count) Om de sectie montage samen te vatten, laten we de volgorde bekijken van gebeurtenissen in de PopularBar en de twee ClickCounter-componenten die het bevat. Voor uw gemak, toon ik de emoji voor elke ClickCounter, zodat ze kunnen worden onderscheiden.
--- De constructeur van PopularBar is hier! --- PopularBar zal koppelen. Yay! 👍 === Constructor ClickCounter is hier! 👍 === ClickCounter wordt geactiveerd. Yay! 👎 === Constructor ClickCounter is hier! 👎 === ClickCounter wordt geactiveerd. Yay! 👍 === ClickCounter heeft gemount. count: 5 👎 === ClickCounter heeft opgezet. tel: 8 --- PopularBar heeft opgezet. upCount: 5, downCount: 8
Ten eerste is de PopularBar geconstrueerd en zijn componentWillMount () methode wordt genoemd. Vervolgens de constructor en componentWillMount () methoden van elke ClickCounter-component worden aangeroepen, gevolgd door de componentDidMount () oproepen naar beide ClickCounter-componenten. eindelijk, de componentDidMount () methode van PopularBar wordt genoemd. Over het algemeen is de stroom genest waarbij alle subcomponenten volledig moeten worden gemonteerd voordat hun component volledig is gemonteerd.
Nadat het onderdeel is aangekoppeld, kan het worden gerenderd. Zo nu en dan kan de toestand van het onderdeel of de rekwisieten die het uit zijn verpakking ontvangt, veranderen. Dergelijke wijzigingen leiden tot re-rendering, maar de component krijgt de kans om op de hoogte te worden gesteld en controleert zelfs of rendering moet worden uitgevoerd of niet.
Er zijn vier methoden betrokken bij het updateproces en ik zal ze in volgorde behandelen.
De componentWillReceiveProps () methode wordt aangeroepen wanneer nieuwe hulpmiddelen vanuit de container worden ontvangen. Je hebt toegang tot de huidige rekwisieten via this.props en naar de volgende rekwisieten via de nextProps parameter. Hier is de componentWillReceiveProps () methode van ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter ontvangt rekwisieten.' + 'volgende rekwisieten:' + nextProps.count)
U hebt hier de mogelijkheid om na te gaan welke rekwisieten zijn gewijzigd en de status van het onderdeel te wijzigen als u dat wilt. Het is OK om te bellen this.setState () hier.
De shouldComponentUpdate () is een belangrijke methode. Het wordt aangeroepen wanneer nieuwe rekwisieten worden ontvangen (na componentWillReceiveProps () wordt genoemd) of nadat de status van het onderdeel elders is gewijzigd. Als u deze methode niet implementeert, wordt het onderdeel telkens opnieuw weergegeven.
Maar als u het implementeert en 'false' retourneert, worden het onderdeel en de onderliggende componenten niet weergegeven. Merk op dat als de status van onderliggende componenten is gewijzigd, deze opnieuw worden gerenderd, zelfs als u altijd 'false' retourneert van de parent's shouldComponentUpdate ().
Je krijgt hier toegang tot de volgende rekwisieten en de volgende staat, dus je hebt alle informatie die nodig is om een beslissing te nemen. De component ClickCounter geeft 99+ weer als het aantal groter is dan 99, dus het moet alleen worden bijgewerkt als het aantal kleiner is dan 100. Dit is de code:
shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () laat shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
De componentWillUpdateMethod () wordt genoemd naar de component shouldComponentUpdate () alleen als shouldComponentUpdate () Geretourneerd waar. Op dit punt heb je zowel de volgende rekwisieten als de volgende staat. U kunt de status hier niet wijzigen, omdat dit de oorzaak is shouldComponentUpdate () opnieuw worden gebeld.
Hier is de code:
componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter zal' + 'nextProps.count bijwerken:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount)
Eindelijk, na de weergave, de componentDidUpdate () methode wordt genoemd. Het is OK om te bellen this.setState () hier omdat de weergave voor de vorige statuswijziging al is voltooid.
Hier is de code:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter heeft bijgewerkt')
Laten we de updatemethoden in actie zien. Ik zal twee soorten updates veroorzaken. Eerst klik ik met de duimen omhoogknop om een statuswijziging te activeren:
--- De constructeur van PopularBar is hier! PopularBar.js: 10 --- PopularBar zal koppelen. Yay! PopularBar.js: 14 👍 === Constructeur van ClickCounter is hier! 👍 === ClickCounter wordt geactiveerd. Yay! 👎 === Constructor ClickCounter is hier! 👎 === ClickCounter wordt geactiveerd. Yay! 👍 === ClickCounter heeft gemount. count: 5 ClickCounter.js: 20 👎 === ClickCounter heeft opgezet. count: 8 ClickCounter.js: 20 --- PopularBar heeft gemount. upCount: 5, downCount: 8 👍 === ClickCounter moet worden bijgewerkt 👍 === ClickCounter zal nextProps.count bijwerken: 5 nextState.clickCount: 1 👍 === ClickCounter heeft bijgewerkt
Merk op dat de nextState.clickCount is 1, waarmee de updatecyclus wordt gestart. De volgende update wordt veroorzaakt doordat de ouder nieuwe rekwisieten passeert. Om dit te vergemakkelijken, zal ik een kleine functie toevoegen die elke 5 seconden triggert en de telling met 20 verhoogt. Hier is de code in de hoofdcomponent van de App die de PopularBar bevat. De wijziging wordt doorgevoerd tot de ClickCounter.
klasse App breidt Component constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 ); everyFiveSeconds () let state = this.state state.upCount + = 20 this.setState (state)
Dit is de uitvoer. Merk op dat de ClickCounter willReceiveProps () methode is aangeroepen en de nextState.clickCount blijft op nul, maar nextProps.Count is nu 25.
--- De constructeur van PopularBar is hier! --- PopularBar zal koppelen. Yay! 👍 === Constructor ClickCounter is hier! 👍 === ClickCounter wordt geactiveerd. Yay! 👎 === Constructor ClickCounter is hier! 👎 === ClickCounter wordt geactiveerd. Yay! 👍 === ClickCounter heeft gemount. count: 5 👎 === ClickCounter heeft opgezet. tel: 8 --- PopularBar heeft opgezet. upCount: 5, downCount: 8 👍 === ClickCounter ontvangt rekwisieten. volgende rekwisieten: 25 👍 === ClickCounter zou moeten updaten 👍 === ClickCounter zal nextProps.count bijwerken: 25 nextState.clickCount: 0
Componenten kunnen worden gedemonteerd en opnieuw worden gemonteerd en er kunnen fouten optreden tijdens de levenscyclus van een component.
Als een component niet wordt weergegeven door de container, wordt deze niet van de virtuele DOM en de niet-gemonteerde componenten losgemaakt componentWillUnmount () methode wordt genoemd. De PopularBar zal zijn ClickCounter-subcomponenten niet weergeven als de showprop onwaar is. De app-component geeft de PopularBar weer en geeft de showprop door op basis van het selectievakje.
Dit zijn de apps render () methode:
render () retour ()Populaire bar
Wanneer de gebruiker het selectievakje uitschakelt, wordt de PopularBar nog steeds weergegeven, maar worden de onderliggende componenten niet geretourneerd, maar deze worden niet aangekoppeld. Hier is de code en de uitvoer:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter zal unmount :-(') Uitgang: 👍 === ClickCounter zal unmount :-( 👎 === ClickCounter zal unmount :-( Er is geen componentDidUnmount () methode omdat er op dit moment geen onderdeel is.
De componentDidCatch () methode is recent toegevoegd in React 16. Het is ontworpen om te helpen met een fout tijdens het renderen die eerder resulteerde in obscure foutmeldingen. Nu is het mogelijk om speciale foutgrenscomponenten te definiëren die een onderliggende component wikkelen die fouten kan veroorzaken, en de foutgrenscomponent wordt alleen weergegeven als de fout is opgetreden.
Reactieve componenten hebben een goed gedefinieerde levenscyclus en speciale methoden laten u uw logica opnemen en acties ondernemen, de status op een zeer fijnmazig niveau controleren en zelfs fouten afhandelen.
Meestal is dit niet nodig en kunt u props doorgeven en implementeren render () methode, maar het is goed om te weten dat je in meer gespecialiseerde omstandigheden niet naar een zwarte doos hoeft te staren.
In de afgelopen paar jaar is React in populariteit gegroeid. In feite hebben we een aantal items op de markt die beschikbaar zijn voor aankoop, beoordeling, implementatie enzovoort. Als u op zoek bent naar extra bronnen rond React, aarzel dan niet om ze te bekijken.
