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

HOME

En React, els components són les peces fonamentals que permeten construir la interfície d'usuari. Hi ha dues maneres principals de definir components en React: components funcionals i components de classe. En aquesta secció, explorarem les diferències entre aquests dos tipus de components, els avantatges i desavantatges de cadascun, i quan és més adequat utilitzar un tipus o l'altre.

Components funcionals

Els components funcionals són funcions de JavaScript que accepten un objecte de propietats (props) com a argument i retornen elements de React. Són més senzills i fàcils de llegir i escriure.

Exemple de component funcional

import React from 'react';

function Greeting(props) {
  return <h1>Hola, {props.name}!</h1>;
}

export default Greeting;

Característiques dels components funcionals

Simplicitat: Són més fàcils de llegir i escriure.
Sense estat: Originalment, els components funcionals no podien tenir estat propi, però això ha canviat amb l'arribada dels hooks.
Millor rendiment: En general, tenen un rendiment lleugerament millor perquè no tenen la sobrecàrrega dels mètodes del cicle de vida.

Components de classe

Els components de classe són classes de JavaScript que estenen de React.Component i tenen un mètode render que retorna elements de React. Aquests components poden tenir estat i mètodes del cicle de vida.

Exemple de component de classe

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

export default Greeting;

Característiques dels components de classe

Estat: Poden tenir estat propi, gestionat amb this.state.
Mètodes del cicle de vida: Poden utilitzar mètodes del cicle de vida com componentDidMount, componentDidUpdate, etc.
Més verbosos: Són més verbosos i poden ser més difícils de llegir i mantenir.

Comparació entre components funcionals i de classe

Característica	Components funcionals	Components de classe
Definició	Funció de JavaScript	Classe de JavaScript
Estat	Utilitzen hooks (`useState`, `useEffect`)	Utilitzen `this.state` i `setState`
Mètodes del cicle de vida	Utilitzen hooks (`useEffect`)	Utilitzen mètodes del cicle de vida
Simplicitat	Més senzills i concisos	Més verbosos
Rendiment	Lleugerament millor	Lleugerament pitjor

Quan utilitzar components funcionals vs components de classe

Components funcionals: Són ideals per a components senzills que no necessiten estat o mètodes del cicle de vida. Amb l'arribada dels hooks, també poden gestionar estat i efectes col·laterals, fent-los una opció preferida en molts casos.
Components de classe: Són útils quan es necessita accedir als mètodes del cicle de vida de React o quan es treballa en un projecte existent que ja utilitza components de classe.

Exercici pràctic

Exercici 1: Convertir un component de classe a un component funcional

Converteix el següent component de classe a un component funcional:

import React, { Component } from 'react';

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

export default Welcome;

Solució

import React from 'react';

function Welcome(props) {
  return <h1>Benvingut, {props.name}!</h1>;
}

export default Welcome;

Exercici 2: Afegir estat a un component funcional

Crea un component funcional que mostri un comptador i un botó per incrementar el comptador. Utilitza el hook useState.

Solució

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Comptador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

export default Counter;

Conclusió

En aquesta secció, hem explorat les diferències entre components funcionals i components de classe en React. Hem vist exemples pràctics de cada tipus de component i hem après quan és més adequat utilitzar un tipus o l'altre. Amb l'arribada dels hooks, els components funcionals han esdevingut una opció molt potent i flexible, permetent gestionar estat i efectes col·laterals de manera senzilla.

Components funcionals vs components de classe