React.Component — klasskomponenter och hur de fungerar

Vad är React.Component?

React.Component — en abstrakt klass som tillhandahåller inbyggda metoder för att arbeta med tillstånd, props och komponentens livscykel. För att skapa en klasskomponent måste du definiera en klass som ärver från React.Component och implementera render-metoden.

React.Component dök upp i den allra första versionen av React (2013) och förblev det huvudsakliga sättet att skapa komponenter under fem år. React-ekosystemet byggdes runt klasser: högre ordningens komponenter (HOC), render props, kontext — alla dessa mönster implementerades via klassyntax.

Med lanseringen av React 16.8 2019 introducerade React-teamet hooks som ett alternativ till klasser. Hooks löste samma uppgifter — tillstånd, effekter, kontext — men utan arv och komplex kontextbindning. React.Component förblir fullt stödd, men för nya projekt rekommenderas det funktionella tillvägagångssättet.

Skapa en klasskomponent

En minimal klasskomponent — en klass med en enda render-metod som returnerar ett React-element. render — den enda obligatoriska metoden. Den måste vara en ren funktion av this.props och this.state: samma uppsättning props och tillstånd ger samma resultat.

import React, { Component } from 'react';

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

Konstruktor och initialisering av tillstånd

Konstruktorn körs före montering. I den anropas super(props) för att skicka props till föräldraklassen och this.state initialiseras. Att använda konstruktorn för andra ändamål — prenumerationer, API-anrop — rekommenderas inte: för det finns componentDidMount.

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

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

Tillståndshantering via this.state och this.setState

this.state — objektet som innehåller komponentens data. Att direkt ändra det (this.state.count = 1) är förbjudet — det orsakar ingen omrendering och bryter förutsägbarheten. Tillståndet måste uppdateras via this.setState, som skapar ett nytt tillståndsobjekt och utlöser omrendering.

setState kan ta emot ett objekt eller en funktion. Den funktionella formen är att föredra när det nya tillståndet beror på det föregående: this.setState(prev => ({ count: prev.count + 1 })). React kan gruppera flera setState-anrop i en batch för prestandaoptimering.

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>
    );
  }
}

En viktig egenskap hos setState — den är asynkron. Efter att ha anropat setState uppdateras tillståndet inte omedelbart. Om du behöver utföra en åtgärd efter uppdateringen, skicka en callback som andra argument: this.setState(newState, () => console.log(this.state)).

Livscykelmetoder

Klasskomponenter har fördefinierade metoder som React anropar vid specifika tillfällen. Montering — constructor → render → componentDidMount. Uppdatering — render → componentDidUpdate. Avmontering — componentWillUnmount.

ComponentDidMount — datahämtning

componentDidMount — den främsta platsen för biverkningar efter den första renderingen. Här utförs HTTP-förfrågningar, WebSocket-anslutningar upprättas och timers startas. Om du inte rensar prenumerationen i componentWillUnmount uppstår en minnesläcka.

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

  componentWillUnmount() {
    // Avbryt begäran vid avmontering
  }

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

Bindning av this-kontext i metoder

I JavaScript är klassmetoder som standard inte bundna till instansen. Om du skickar en metod som callback — till en händelsehanterare, timer — kommer this att vara undefined (i strikt läge) eller window (utan strikt läge). Utan bindning kommer this.setState att kasta ett fel.

Det finns tre sätt att binda: bind i konstruktorn, pilfunktion i callback och class field med pilfunktion. Det första sättet är Rekommendationen från React: bind en gång i konstruktorn, utan att återskapa funktionen vid varje rendering.

// Metod 1: bind i konstruktorn (rekommenderas)
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 — modern syntax med automatisk bindning. Pilfunktionen i klassegenskapen fångar this från konstruktorns synlighetsområde. Nackdelen — metoden skapas på varje instans, inte på prototypen, vilket ökar minnet för hundratals komponenter av samma typ.

Jämförelse av klass- och funktionella komponenter

Valet mellan klass och funktion — är inte bara en fråga om syntax. Funktionella komponenter med hooks löser problem som är inneboende i klasser: duplicering av logik i olika livscykelmetoder (componentDidMount + componentDidUpdate), komplexitet med this och oförmågan att extrahera relaterad logik i ett återanvändbart block.

Funktionella komponenter är lättare att testa — de har inget internt tillstånd (som före hooks bara fanns i klasser) och kräver inte montering i DOM för att kontrollera callbacks. React rekommenderar funktionella komponenter för alla nya projekt, dokumentation och exempel skrivs med dem.

Klasskomponenter förblir det bästa valet när man arbetar med äldre kod. Om projektet startades före 2019 innehåller det troligen tusentals klasskomponenter. Att skriva om alla till hooks i en sprint är riskabelt. React garanterar bakåtkompatibilitet: klasskomponenter kommer inte att tas bort.

Migreringsstrategi från klasser till hooks

Gradvis migrering börjar med analys av komponenten. Enkla komponenter utan tillstånd (stateless) översätts först — de ersätts enkelt med funktioner. Därefter — komponenter med ett eller två tillståndsfält, där useState direkt ersätter this.state och this.setState.

Komplexa komponenter med flera livscykelmetoder översätts via useEffect. Logik från componentDidMount + componentDidUpdate delas upp i separata useEffect med olika beroenden. componentWillUnmount ersätts med en returfunktion inuti useEffect. För komplex tillståndslogik, använd useReducer.

Automatiska migreringsverktyg — @phenomnomnominal/ts-react-class-to-hook eller codemod-skript — kan automatiskt konvertera enkla klasser. För komplexa fall förblir migrering manuellt arbete som kräver förståelse för den ursprungliga komponentens logik.