React.Component — klassecomponenten en hoe ze werken

Wat is React.Component?

React.Component — een abstracte klasse die ingebouwde methoden biedt voor het werken met status, props en de levenscyclus van de component. Om een klassecomponent te maken, moet u een klasse definiëren die overerft van React.Component en de render-methode implementeren.

React.Component verscheen in de allereerste versie van React (2013) en bleef de belangrijkste manier om componenten te maken gedurende vijf jaar. Het React-ecosysteem is rond klassen opgebouwd: componenten van hogere orde (HOC), render props, context — al deze patronen zijn via klassensyntaxis geïmplementeerd.

Met de release van React 16.8 in 2019 introduceerde het React-team hooks als alternatief voor klassen. Hooks losten dezelfde taken op — status, effecten, context — maar zonder overerving en complexe contextbinding. React.Component blijft volledig ondersteund, maar voor nieuwe projecten wordt de functionele benadering aanbevolen.

Een klassecomponent maken

Een minimale klassecomponent — een klasse met slechts één render-methode die een React-element retourneert. render — de enige verplichte methode. Het moet een pure functie zijn van this.props en this.state: dezelfde set props en status geeft hetzelfde resultaat.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Constructor en initialisatie van status

De constructor wordt uitgevoerd vóór het monteren. Daarin wordt super(props) aangeroepen om props door te geven aan de ouderklasse en wordt this.state geïnitialiseerd. De constructor voor andere doeleinden gebruiken — abonnementen, API-aanroepen — wordt niet aanbevolen: daarvoor is componentDidMount.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Statusbeheer via this.state en this.setState

this.state — het object dat de gegevens van de component bevat. Het direct wijzigen (this.state.count = 1) is verboden — het veroorzaakt geen herrendering en verbreekt de voorspelbaarheid. De status moet worden bijgewerkt via this.setState, die een nieuw statusobject maakt en een herrendering start.

setState kan een object of een functie ontvangen. De functionele vorm heeft de voorkeur wanneer de nieuwe status afhankelijk is van de vorige: this.setState(prev => ({ count: prev.count + 1 })). React kan meerdere setState-aanroepen groeperen in één batch voor prestatieoptimalisatie.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Een belangrijke eigenschap van setState — het is asynchroon. Na het aanroepen van setState wordt de status niet onmiddellijk bijgewerkt. Als u een actie moet uitvoeren na de update, geef dan een callback als tweede argument: this.setState(newState, () => console.log(this.state)).

Levenscyclusmethoden

Klassencomponenten hebben vooraf gedefinieerde methoden die React op specifieke momenten aanroept. Monteren — constructor → render → componentDidMount. Bijwerken — render → componentDidUpdate. Demonteren — componentWillUnmount.

ComponentDidMount — gegevens ophalen

componentDidMount — de belangrijkste plek voor neveneffecten na de eerste render. Hier worden HTTP-verzoeken uitgevoerd, WebSocket-verbindingen tot stand gebracht en timers gestart. Als u het abonnement niet opschoont in componentWillUnmount, treedt er een geheugenlek op.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Verzoek annuleren bij demontage
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

This-context binding in methoden

In JavaScript zijn klassemethoden standaard niet gebonden aan de instantie. Als u een methode als callback doorgeeft — aan een gebeurtenishandler, timer — zal this undefined zijn (in strict mode) of window (zonder strict mode). Zonder binding zal this.setState een fout geven.

Er zijn drie manieren van binding: bind in de constructor, pijlfunctie in de callback en class field met pijlfunctie. De eerste manier is de officiële aanbeveling van React: bind één keer in de constructor, zonder de functie bij elke render opnieuw te maken.

// Methode 1: bind in constructor (aanbevolen)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class field — moderne syntaxis met automatische binding. De pijlfunctie in de klasseeigenschap vangt this uit het zichtbaarheidsbereik van de constructor. Nadeel — de methode wordt op elke instantie gemaakt, niet op het prototype, wat het geheugen verhoogt voor honderden componenten van hetzelfde type.

Vergelijking van klasse- en functionele componenten

De keuze tussen klasse en functie — is niet alleen een kwestie van syntaxis. Functionele componenten met hooks lossen problemen op die inherent zijn aan klassen: duplicatie van logica in verschillende levenscyclusmethoden (componentDidMount + componentDidUpdate), complexiteit met this en het onvermogen om gerelateerde logica te extraheren in een herbruikbaar blok.

Functionele componenten zijn gemakkelijker te testen — ze hebben geen interne status (die vóór hooks alleen in klassen was) en vereisen geen montage in de DOM voor het controleren van callbacks. React beveelt functionele componenten aan voor alle nieuwe projecten, documentatie en voorbeelden worden ermee geschreven.

Klassencomponenten blijven de beste keuze bij het werken met verouderde code. Als het project vóór 2019 is gestart, bevat het waarschijnlijk duizenden klassecomponenten. Ze allemaal herschrijven naar hooks in één sprint is riskant. React garandeert achterwaartse compatibiliteit: klassecomponenten zullen niet worden verwijderd.

Migratiestrategie van klassen naar hooks

Geleidelijke migratie begint met analyse van de component. Eenvoudige componenten zonder status (stateless) worden als eerste vertaald — ze worden eenvoudig vervangen door functies. Daarna — componenten met één of twee statusvelden, waar useState direct this.state en this.setState vervangt.

Complexe componenten met meerdere levenscyclusmethoden worden vertaald via useEffect. Logica uit componentDidMount + componentDidUpdate wordt verdeeld over afzonderlijke useEffects met verschillende afhankelijkheden. componentWillUnmount wordt vervangen door een retourfunctie binnen useEffect. Gebruik useReducer voor complexe statuslogica.

Automatische migratietools — @phenomnomnominal/ts-react-class-to-hook of codemod-scripts — kunnen eenvoudige klassen automatisch converteren. Voor complexe gevallen blijft migratie handwerk dat inzicht vereist in de logica van de oorspronkelijke component.