Class component in React: stato, ciclo di vita, conversione

Un class component è una classe JavaScript che estende React.Component e restituisce JSX da un metodo render(). Legge le props da this.props, tiene lo stato in this.state e lo aggiorna con this.setState(). I function component con gli hook li hanno sostituiti per il codice nuovo, ma le classi sono ancora pienamente supportate, compaiono in molte codebase più vecchie e sono l'unico modo per scrivere un error boundary.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Ogni contatore tiene il proprio stato. Aggiungi un terzo <Counter label="Plums" /> e parte anche lui da 0.

Anatomia di un class component

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• La classe estende Component (o React.Component con import React from 'react').
• render() è obbligatorio. Deve essere puro, come il corpo di un function component: legge this.props e this.state, restituisce JSX.
• this.props contiene le props. Sono di sola lettura.
• Lo stato può essere impostato in un constructor (chiama prima super(props)) o, più comunemente oggi, come campo della classe: state = { visits: 1 };.
• static defaultProps funziona ancora per le classi in React 19 (è stato rimosso solo per i function component).

this.setState unisce, e può ricevere una funzione di aggiornamento

setState fa due cose in modo diverso dal setter di useState. Unisce l'oggetto che passi allo stato attuale, quindi aggiorni solo le chiavi che nomini. E, come ogni aggiornamento di stato in React, non viene applicato immediatamente, quindi usa la forma con funzione di aggiornamento quando il valore successivo dipende da quello precedente.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects" aggiunge uno, perché tutte e tre le chiamate leggono lo stesso this.state.likes. "+3 with updaters" aggiunge tre. "Move to Paris" mantiene name e likes (l'unione) ma perde zip, perché l'unione è profonda un solo livello. Scrivi address: { ...this.state.address, city: 'Paris' } per mantenerlo. Il secondo argomento facoltativo di setState viene eseguito dopo l'aggiornamento, e la console lì mostra il nuovo indirizzo.

Binding dei gestori di eventi

Un metodo passato come onClick={this.handleClick} viene chiamato più tardi come semplice funzione, senza il suo oggetto, quindi al suo interno this è undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

Il primo pulsante registra un TypeError sulla lettura di setState di undefined. Il secondo funziona, perché una arrow function in un campo della classe cattura this quando viene creata l'istanza. La soluzione più vecchia, ancora comune nel codice legacy, fa il binding nel costruttore:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

Funziona anche una arrow in linea, onClick={() => this.handleClick()}.

Metodi del ciclo di vita

Le classi reagiscono a montaggio, aggiornamento e smontaggio tramite metodi con nomi fissi. Quelli che vedrai più spesso:

• componentDidMount(): dopo che il primo rendering è nel DOM. Avvia timer, sottoscrizioni, richieste.
• componentDidUpdate(prevProps, prevState): dopo ogni aggiornamento. Confronta con i valori precedenti prima di fare qualsiasi lavoro, altrimenti entri in un ciclo.
• componentWillUnmount(): prima della rimozione. Annulla ciò che componentDidMount ha avviato.
• shouldComponentUpdate(nextProps, nextState): restituisci false per saltare un rendering.

La pagina sul ciclo di vita dei componenti ha la lista completa, l'ordine in cui vengono eseguiti e un componente che li registra tutti.

Convertire una classe in un function component

Ecco una classe che usa tutti e tre i metodi del ciclo di vita più comuni. Avanza ogni secondo, registra quando cambia la sua prop label e ferma il timer quando viene rimossa.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Ed ecco lo stesso componente come funzione. Ogni metodo del ciclo di vita diventa parte di un effetto, e setup e cleanup correlati stanno uno accanto all'altro invece che in due metodi.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Entrambi i timer contano allo stesso modo e registrano a ogni cambio di etichetta. La versione con funzione registra anche una volta al montaggio, perché un effetto viene eseguito anche dopo il primo rendering. I passaggi per qualsiasi conversione:

1. this.props.x diventa una prop destrutturata, { x }.
2. Ogni chiave di this.state diventa il proprio useState. Ricorda che il setter sostituisce invece di unire.
3. I metodi diventano semplici funzioni dentro il componente. Nessun binding necessario.
4. componentDidMount, componentDidUpdate e componentWillUnmount diventano chiamate a useEffect, raggruppate per ciò che fanno invece che per quando vengono eseguite.
5. createRef diventa useRef, e static contextType con this.context diventa useContext o use.

Lascia gli error boundary come classi; non hanno un equivalente come funzione.

PureComponent

Un normale class component si renderizza ogni volta che lo fa il suo genitore. PureComponent prima confronta le nuove props e il nuovo stato con quelli precedenti, a un solo livello di profondità, e salta il rendering quando non è cambiato nulla. È la controparte per le classi di React.memo.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Clicca il pulsante: viene registrato solo PlainLabel rendered, perché PureLabel vede lo stesso text. Passa text={'hello ' + clicks} a entrambi ed entrambi si renderizzano a ogni clic.

Il confronto è superficiale, quindi una prop che è un nuovo oggetto o una nuova funzione a ogni rendering del genitore (style={{ color: 'red' }}, onClick={() => ...}) lo vanifica. È la stessa trappola di React.memo.

Cose che React 19 ha rimosso dalle classi

Se mantieni codice vecchio con classi, alcuni schemi non funzionano più in React 19:

• Ref stringa (ref="input" con this.refs.input). Usa createRef() o un ref callback.
• Context legacy (contextTypes, childContextTypes, getChildContext). Usa createContext con static contextType.
• propTypes vengono ignorati. Usa TypeScript o controlli tuoi.
• findDOMNode non esiste più. Metti invece un ref sull'elemento DOM.

Anche i vecchi metodi componentWillMount, componentWillReceiveProps e componentWillUpdate sono legacy. Vengono ancora eseguiti, sia con i vecchi nomi sia con i nomi UNSAFE_ (UNSAFE_componentWillMount e così via), ma sono deprecati e StrictMode avvisa del loro uso; sposta il loro codice in componentDidMount, componentDidUpdate o getDerivedStateFromProps.