Een React-component doorloopt verschillende fasen in zijn leven, oftewel, het heeft een levenscyclus die op verschillende punten unieke gebeurtenissen kan bevatten. Deze levenscyclus kan voornamelijk in drie delen worden onderverdeeld: Mounting, Updating en Unmounting.
1. Mounting: Dit is de fase waarin het component voor de eerste keer wordt aangemaakt en geïnjecteerd in het DOM. Dit omvat de volgende methoden:
- constructor(): Dit is waar je de staat (state) van het component instelt en andere opstartzaken afhandelt.
- static getDerivedStateFromProps(): Wordt direct na het aanmaken van een componentinstantie aangeroepen. Hier kun je de staat van je component afleiden van de eigenschappen (props).
- render(): Dit is de vereiste methode in een component klasse. Het zal je component uitvoeren en het resultaat zal dan naar de DOM worden weergegeven.
- componentDidMount(): Deze methode wordt direct na het invoegen van een component in de DOM aangeroepen. Het is een goede plek om netwerkverzoeken te doen of andere taken die met de DOM te maken hebben.
1. Updating: Wanneer veranderingen worden aangebracht aan een component, bijvoorbeeld door veranderingen in de staat of eigenschappen, wordt deze bijgewerkt. Dit omvat de volgende methoden:
- static getDerivedStateFromProps(): Net als bij de montagefase kan deze methode worden gebruikt om de status bij te werken voordat de volgende rendering plaatsvindt.
- shouldComponentUpdate(): Hier kun je beslissen of React het component opnieuw moet renderen of niet. Standaard renderen componenten opnieuw bij elke staat- of rekwisietenverandering.
- render(): Net als bij montage wordt het component opnieuw gerenderd.
- getSnapshotBeforeUpdate(): Dit wordt aangeroepen vlak voor de meest recentelijk gerenderde uitvoer wordt gecommit naar de DOM. Het geeft een waarde terug die wordt doorgegeven aan componentDidUpdate().
- componentDidUpdate(): Deze methode wordt direct na de update in de DOM aangeroepen en is een goede plek om netwerkverzoeken te doen of dingen te doen op basis van de oude eigenschappen vóór de update.
1. Unmounting: Dit is de laatste fase van de levenscyclus van het component, wanneer het component uit de DOM wordt verwijderd. Het bevat een enkele methode:
- componentWillUnmount(): Deze methode wordt onmiddellijk voor het ontkoppelen van een component uit de DOM aangeroepen. Het is een goede plek om opruimingstaken uit te voeren zoals timers annuleren, netwerkverzoeken annuleren, of opschonen van alle handmatige wijzigingen in de DOM.
Houd er rekening mee dat deze beschrijving geldt voor de zogenaamde “klascomponenten” van React. Met de introductie van hooks in React 16.8 hebben functionele componenten nu ook toegang tot gelijkaardige levenscyclushaken via useEffect().
