El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

State: Gestionar l'estat del component

Següent ►
►

Introducció

En React, l'estat (state) és un objecte que conté dades que poden canviar al llarg del temps i que afecten la renderització del component. A diferència de les props, que són immutables i es passen des del component pare, l'estat és gestionat internament pel component.

Conceptes clau

  • State: Un objecte que conté dades que poden canviar.
  • setState: Una funció que permet actualitzar l'estat del component.
  • Renderització: Quan l'estat canvia, React torna a renderitzar el component per reflectir els canvis.

Exemple pràctic

Component de Classe

Abans de l'arribada dels hooks, l'estat es gestionava principalment en components de classe. Vegem un exemple bàsic:

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Explicació del codi

  1. Constructor: Inicialitzem l'estat en el constructor del component.
  2. this.state: Conté l'objecte d'estat inicial.
  3. this.setState: Funció que actualitza l'estat. En aquest cas, incrementem el valor de count en 1.
  4. render(): Renderitza el component. Cada vegada que l'estat canvia, el component es torna a renderitzar.

Component Funcional amb Hooks

Amb l'arribada dels hooks en React 16.8, podem gestionar l'estat en components funcionals utilitzant el hook useState.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Explicació del codi

  1. useState: Hook que retorna un array amb dos elements: l'estat actual (count) i una funció per actualitzar-lo (setCount).
  2. setCount: Funció que actualitza l'estat. En aquest cas, incrementem el valor de count en 1.
  3. Renderització: Igual que en el component de classe, cada vegada que l'estat canvia, el component es torna a renderitzar.

Exercicis pràctics

Exercici 1: Crear un component de classe amb estat

Crea un component de classe anomenat Toggle que tingui un botó per alternar entre "On" i "Off".

Solució

import React, { Component } from 'react';

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: true
    };
  }

  toggle = () => {
    this.setState({ isOn: !this.state.isOn });
  }

  render() {
    return (
      <div>
        <p>{this.state.isOn ? 'On' : 'Off'}</p>
        <button onClick={this.toggle}>Toggle</button>
      </div>
    );
  }
}

export default Toggle;

Exercici 2: Crear un component funcional amb useState

Crea un component funcional anomenat Toggle que tingui un botó per alternar entre "On" i "Off" utilitzant el hook useState.

Solució

import React, { useState } from 'react';

const Toggle = () => {
  const [isOn, setIsOn] = useState(true);

  const toggle = () => {
    setIsOn(!isOn);
  }

  return (
    <div>
      <p>{isOn ? 'On' : 'Off'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

export default Toggle;

Errors comuns i consells

  • No modificar l'estat directament: Sempre utilitza setState o la funció de l'hook useState per actualitzar l'estat. Modificar l'estat directament no provocarà una nova renderització del component.
  • Evitar actualitzacions asíncrones: setState és asíncron, per la qual cosa no es pot confiar en l'estat immediatament després de cridar-lo. Utilitza una funció de callback si necessites actualitzar l'estat basant-te en l'estat anterior.

Conclusió

L'estat és una part fonamental de React que permet crear components dinàmics i interactius. Tant si utilitzes components de classe com funcionals, comprendre com gestionar l'estat és essencial per desenvolupar aplicacions React eficients i mantenibles. En el següent mòdul, explorarem com gestionar esdeveniments en React per fer les nostres aplicacions encara més interactives.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats