El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els mètodes del cicle de vida de React són funcions especials que es poden definir en components de classe per executar codi en moments específics del cicle de vida d'un component. Aquests mètodes permeten als desenvolupadors controlar el comportament dels components durant la seva creació, actualització i destrucció.

Fases del cicle de vida

El cicle de vida d'un component de React es divideix en tres fases principals:

Muntatge (Mounting): Quan el component es crea i s'insereix al DOM.
Actualització (Updating): Quan el component es re-renderitza a causa de canvis en les props o l'estat.
Desmuntatge (Unmounting): Quan el component es retira del DOM.

Mètodes del cicle de vida

Muntatge

constructor(props): S'utilitza per inicialitzar l'estat i vincular mètodes. És el primer mètode que s'executa.

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

componentDidMount(): S'executa després que el component s'hagi muntat al DOM. Ideal per fer peticions a APIs o subscripcions.

class MyComponent extends React.Component {
  componentDidMount() {
    // Crida a una API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
}

Actualització

shouldComponentUpdate(nextProps, nextState): Determina si el component ha de re-renderitzar-se. Retorna un valor booleà. Per defecte, retorna true.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Només re-renderitzar si el nou estat és diferent
    return nextState.count !== this.state.count;
  }
}

componentDidUpdate(prevProps, prevState): S'executa després que el component s'hagi actualitzat. Ideal per fer operacions que depenen del DOM actualitzat.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('El component s'ha actualitzat');
    }
  }
}

Desmuntatge

componentWillUnmount(): S'executa just abans que el component es desmunti i es retiri del DOM. Ideal per netejar subscripcions o temporitzadors.
```
class MyComponent extends React.Component {
  componentWillUnmount() {
    // Netejar subscripcions
    clearInterval(this.timerID);
  }
}
```

Exemple complet

A continuació, es mostra un exemple complet d'un component de classe que utilitza diversos mètodes del cicle de vida:

class LifecycleDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  componentDidMount() {
    console.log('Component muntat');
    this.timerID = setInterval(() => this.increment(), 1000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count % 2 === 0;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component actualitzat');
  }

  componentWillUnmount() {
    console.log('Component desmuntat');
    clearInterval(this.timerID);
  }

  increment() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

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

Exercicis pràctics

Exercici 1

Crea un component de classe que faci una petició a una API quan es munti i mostri les dades obtingudes. Assegura't de netejar qualsevol subscripció o temporitzador quan el component es desmunti.

Solució

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  componentWillUnmount() {
    // Netejar qualsevol subscripció si fos necessari
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Carregant...'}
      </div>
    );
  }
}

Exercici 2

Crea un component de classe que incrementi un comptador cada segon, però només es re-renderitzi quan el comptador sigui múltiple de 5.

Solució

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

  componentDidMount() {
    this.timerID = setInterval(() => this.increment(), 1000);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count % 5 === 0;
  }

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

  increment() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

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

Conclusió

Els mètodes del cicle de vida de React són eines poderoses per controlar el comportament dels components en diferents fases del seu cicle de vida. Comprendre com i quan utilitzar aquests mètodes és essencial per escriure components de React eficients i mantenibles. Amb la pràctica, podràs utilitzar aquests mètodes per gestionar millor l'estat, les peticions a APIs i altres operacions asíncrones en les teves aplicacions de React.

Mètodes del cicle de vida de React

Fases del cicle de vida

Mètodes del cicle de vida

Muntatge

Actualització

Desmuntatge

Exemple complet

Exercicis pràctics

Exercici 1

Solució

Exercici 2

Solució

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa