Functional Components vs. Class Based Components

kennisbank, JavaScript, React, HTML & CSS

Gepubliceerd: 04.12.2020

Functional VS Class Based Components, deze week ga ik laten zien hoe je met deze twee verschillende manieren een component kan maken in React en wat de grote verschillen er tussen zijn. En waarom functional components in populariteit aan het stijgen zijn.


Deze week duiken we weer in de wondere wereld van React. In eerdere artikelen hebben we het gehad over verschillende aspecten van React en toen zijn kort Functional en Class based Components naar voren gekomen. Deze week wil ik wat dieper in gaan op de verschillen en overeenkomsten tussen deze 2 componenten aangezien de Functional Components populariteit aan het winnen zijn.


Aan de hand van een paar voorbeelden ga ik de verschillen tussen de twee laten zien, zodat je misschien zelf kan zien waarom functional components zo populair aan het worden zijn.


Class-based Components

Een van de redenen waarom Functional Components terrein winnen is de komst van hooks. Voor de komst van hooks moesten we, als we een dynamisch element wilde maken, gebruik maken van Class based Components. Dit kwam omdat functional components geen state of lifecycle methods hadden.

Als we een class based component maken dan maken we een ES6 class waarbij we React.Component moeten extenden. Deze class moet dan een render method erin hebben waarin we de JSX markup teruggeven.


Als voorbeeld maken we een klein, simpel component waarbij de counter automatisch verhoogd wordt. Ook kunnen we hem verhogen door op een knop te klikken. Wanneer we wat toevoegen aan het DOM noemen we dit Mounting in React. Het tegenovergestelde, ‘iets verwijderen uit het DOM’, noemen we unmounting.

Het mounten van een component roept de volgende methodes aan in React.

– constructor() – render() – componentDidMount()


De enige method die verplicht is in een class component is de render() method. Wil je meer weten kijk dan hieronder.

Meer over lifecycle methodes 

Om dit werkend te krijgen hebben we een beginwaarde nodig die veranderd. Dus moeten we onze waarde toekennen aan het state object. Verder hebben we een componentDidMount() method nodig om onze interval op te zetten en een functie om de state van onze counter te verhogen.


Functional Components

Zoals ik in de intro al had verteld, zijn sinds de komst van Hooks in React 16.8, functionele componenten flink in populariteit aan het winnen. Dit komt omdat je met hooks, state kan gebruiken in functionele componenten (de useState hook). Ook is er een hook die bijna hetzelfde doet als de lifecycle methods (de useEffect hook). We kunnen hooks heel makkelijk gebruiken door bij het import statement naast React de naam van de hook te importeren.


useState hook

Zoals we hierboven aangeven kunnen we heel makkelijk de useState hook importeren. Dat ziet er dan zo uit:

import react, { useState } from ‘react’;


Als we met hooks de state zetten dan maken we ook gelijk een functie aan om hem te updaten. Ook zetten we gelijk de default value van die state. Dit ziet er dan zo uit:

const [ counter, setCounter ] = useState(0)


counter is onze state, setCounter is onze functie om hem te updaten en de 0 in useState is de initiële waarde van de state counter.


useEffect hook

De useEffect hook wordt aangeroepen als je component voor het eerst gerendered wordt en bij elke rerender. Dit kan je nog verder aanpassen door bepaalde parameters mee te geven in een array als 2e argument. Ook kan je hierin een cleanup functie meegeven voor als je component unmount.

useEffect(() => { const ticker = setInterval(() => { setCounter(counter + 1) }, 1000); return () => clearInterval(ticker) });


We gebruiken de setCounter van de useState hook om de state te updaten. En we returnen de cleanup functie om de interval functie weg te halen als we het component unmounten. Dit staat gelijk aan de componentWillUnmount() lifecycle method.


Een van de belangrijkste verschillen is dat functionele componenten beduidend minder code nodig hebben. Zelf blijf ik ook fan van de class based components waar alles duidelijk gestructureerd staat. Maar de compacte manier van programmeren in functionele componenten spreekt me ook heel erg aan en na wat wennen leest dat ook prima weg. Het idee van minder code spreekt zeker de luiaard in mij aan. Na wat experimenteren ben ik er ook nog steeds niet achter welke manier ik het fijnste vind. Misschien eindigen we wel met een combinatie van de 2 functionele componenten waar het kan, en class based componenten voor wat meer overzichtelijkheid.


We hebben kort uitgelegd aan de hand van een voorbeeld de verschillen tussen een class based component en een function based component. Maar het grootste verschil, waar, vaak overheen gekeken wordt, is dat function componenten de gerenderde waardes vastleggen. Hier ben ik niet op in gegaan omdat dit fantastisch wordt uitgelegd in een artikel geschreven door Dan Abramov. Hieronder staat de link naar dat artikel


Artikel van Dan Abramov

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

Artificial Intelligence vs Machine Learning: Dit is het verschil

Software-modernisering, kennisbank, Automatisering, Webontwikkeling

Tegenwoordig worden er veel termen door elkaar gegooid. Zo hoor je wel eens over Artificial Intelligence, maar ook over Machine Learning en misschien zelfs Deep Learning. Hierdoor kan het nogal onduidelijk worden wat nu precies de term is die je zoekt...

Lees meer

Integraties: 5 redenen waarom je al je tools wilt koppelen

Software-modernisering, Webontwikkeling, Bedrijfssoftware, kennisbank, Automatisering

Integraties zijn uiterst belangrijk om een soepele samenwerking tussen al uw tools te waarborgen. Helaas gebeurt het nog vaak dat bedrijven sommige activiteiten minder soepel laten verlopen door hun tools niet goed te koppelen. Dit is natuurlijk zonde...

Lees meer

Geen veilige server verbinding: Dit zijn de meest voorkomende verbindingsfouten

kennisbank

Foutmeldingen bij het opzoeken van een website komen vaak voor. Ondanks dat ze vaak gemakkelijk op te lossen zijn, gaat dit nog vaak fout. Zo kan het liggen aan een klein foutje, maar hierdoor kan een verbindingsfout direct voorkomen. Om deze fouten...

Lees meer

En wat kunnen we voor jou betekenen?_

Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

back to top