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

HOME

En aquest tema, explorarem dos conceptes fonamentals en la construcció de components en React: la composició i l'herència. Aquests conceptes són crucials per crear components reutilitzables i mantenibles.

Què és la composició?

La composició és una tècnica per construir components complexos a partir de components més simples. En lloc d'heretar funcionalitats d'un component pare, un component pot incloure altres components com a fills. Això permet una major flexibilitat i reutilització del codi.

Exemple de composició

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Benvingut
      </h1>
      <p className="Dialog-message">
        Gràcies per visitar el nostre lloc web!
      </p>
    </FancyBorder>
  );
}

En aquest exemple, FancyBorder és un component que utilitza la composició per incloure altres components dins seu mitjançant props.children.

Avantatges de la composició

Reutilització del codi: Permet reutilitzar components en diferents parts de l'aplicació.
Flexibilitat: Els components poden ser combinats de diverses maneres.
Mantenibilitat: Facilita la separació de responsabilitats i fa que el codi sigui més fàcil de mantenir.

Què és l'herència?

L'herència és un concepte de la programació orientada a objectes on una classe (component) pot heretar propietats i mètodes d'una altra classe (component). Tot i que l'herència és útil en molts llenguatges de programació, en React es recomana utilitzar la composició en lloc de l'herència.

Exemple d'herència (no recomanat en React)

class FancyBorder extends React.Component {
  render() {
    return (
      <div className={'FancyBorder FancyBorder-' + this.props.color}>
        {this.props.children}
      </div>
    );
  }
}

class WelcomeDialog extends FancyBorder {
  render() {
    return (
      <div>
        <h1 className="Dialog-title">
          Benvingut
        </h1>
        <p className="Dialog-message">
          Gràcies per visitar el nostre lloc web!
        </p>
      </div>
    );
  }
}

En aquest exemple, WelcomeDialog hereta de FancyBorder. Tot i que això és possible, no és la manera recomanada de construir components en React.

Desavantatges de l'herència en React

Rigidesa: L'herència pot fer que el codi sigui més rígid i menys flexible.
Complexitat: Pot augmentar la complexitat del codi, fent-lo més difícil de mantenir.
Reutilització limitada: L'herència limita la reutilització del codi en comparació amb la composició.

Comparació entre composició i herència

Aspecte	Composició	Herència
Reutilització del codi	Alta	Limitada
Flexibilitat	Alta	Baixa
Mantenibilitat	Alta	Baixa
Complexitat	Baixa	Alta
Separació de responsabilitats	Alta	Baixa

Exercici pràctic

Exercici

Crea un component Card que utilitzi la composició per incloure un títol i un contingut. Després, crea un component ProfileCard que utilitzi Card per mostrar informació d'un perfil d'usuari.

Solució

function Card(props) {
  return (
    <div className="Card">
      <div className="Card-title">{props.title}</div>
      <div className="Card-content">{props.children}</div>
    </div>
  );
}

function ProfileCard() {
  return (
    <Card title="Perfil d'Usuari">
      <p>Nom: Joan</p>
      <p>Ocupació: Desenvolupador</p>
    </Card>
  );
}

Conclusió

La composició és una tècnica poderosa i flexible per construir components en React. Tot i que l'herència és un concepte important en la programació orientada a objectes, en React es recomana utilitzar la composició per crear components reutilitzables i mantenibles. Hem vist com utilitzar la composició amb exemples pràctics i hem comparat els avantatges i desavantatges de la composició i l'herència.

Composició vs herència

Què és la composició?

Exemple de composició

Avantatges de la composició

Què és l'herència?

Exemple d'herència (no recomanat en React)

Desavantatges de l'herència en React

Comparació entre composició i herència

Exercici pràctic

Exercici

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