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

HOME

En aquest tema, aprendrem sobre un concepte fonamental en React anomenat "elevar l'estat". Aquest concepte és crucial per gestionar l'estat compartit entre diversos components. Quan diversos components necessiten accedir i actualitzar el mateix estat, és una bona pràctica elevar aquest estat al seu ancestre comú més proper.

Què és elevar l'estat?

Elevar l'estat significa moure l'estat compartit a l'ancestre comú més proper dels components que necessiten aquest estat. Això permet que l'estat sigui gestionat en un sol lloc i que els components fills puguin accedir-hi a través de props.

Per què elevar l'estat?

Sincronització: Quan diversos components necessiten accedir i actualitzar el mateix estat, elevar l'estat ajuda a mantenir-los sincronitzats.
Simplicitat: Gestionar l'estat en un sol lloc fa que el codi sigui més fàcil de mantenir i entendre.
Reutilització: Els components poden ser més reutilitzables si no gestionen l'estat directament.

Exemple pràctic

Suposem que tenim dos components fills que necessiten compartir un mateix estat. En aquest exemple, crearem una aplicació senzilla que permeti a l'usuari introduir un valor en un camp de text i mostrar aquest valor en un altre component.

Pas 1: Crear els components fills

Primer, creem dos components fills: InputComponent i DisplayComponent.

// InputComponent.js
import React from 'react';

function InputComponent({ value, onChange }) {
  return (
    <input type="text" value={value} onChange={onChange} />
  );
}

export default InputComponent;

// DisplayComponent.js
import React from 'react';

function DisplayComponent({ value }) {
  return (
    <p>{value}</p>
  );
}

export default DisplayComponent;

Pas 2: Crear el component pare

Ara, creem un component pare que gestionarà l'estat compartit i passarà aquest estat als components fills a través de props.

// ParentComponent.js
import React, { useState } from 'react';
import InputComponent from './InputComponent';
import DisplayComponent from './DisplayComponent';

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <InputComponent value={inputValue} onChange={handleInputChange} />
      <DisplayComponent value={inputValue} />
    </div>
  );
}

export default ParentComponent;

Explicació del codi

InputComponent: Aquest component rep value i onChange com a props. value és el valor actual del camp de text, i onChange és la funció que s'executa quan l'usuari canvia el valor del camp de text.
DisplayComponent: Aquest component rep value com a prop i mostra aquest valor en un paràgraf.
ParentComponent: Aquest component gestiona l'estat inputValue utilitzant el hook useState. També defineix la funció handleInputChange que actualitza l'estat quan l'usuari canvia el valor del camp de text. Finalment, passa l'estat i la funció de canvi als components fills a través de props.

Exercici pràctic

Exercici

Crea una aplicació que tingui dos components fills: un que permeti a l'usuari introduir un número i un altre que mostri el doble d'aquest número.

Solució

// NumberInputComponent.js
import React from 'react';

function NumberInputComponent({ value, onChange }) {
  return (
    <input type="number" value={value} onChange={onChange} />
  );
}

export default NumberInputComponent;

// DoubleDisplayComponent.js
import React from 'react';

function DoubleDisplayComponent({ value }) {
  return (
    <p>{value * 2}</p>
  );
}

export default DoubleDisplayComponent;

// ParentComponent.js
import React, { useState } from 'react';
import NumberInputComponent from './NumberInputComponent';
import DoubleDisplayComponent from './DoubleDisplayComponent';

function ParentComponent() {
  const [number, setNumber] = useState(0);

  const handleNumberChange = (event) => {
    setNumber(Number(event.target.value));
  };

  return (
    <div>
      <NumberInputComponent value={number} onChange={handleNumberChange} />
      <DoubleDisplayComponent value={number} />
    </div>
  );
}

export default ParentComponent;

Resum

En aquest tema, hem après què és elevar l'estat i per què és important en React. Hem vist un exemple pràctic de com elevar l'estat per compartir-lo entre diversos components fills. També hem practicat aquest concepte amb un exercici pràctic. Elevar l'estat és una tècnica fonamental per gestionar l'estat compartit de manera eficient i mantenir el codi net i fàcil de mantenir.

Elevar l'estat

Què és elevar l'estat?

Per què elevar l'estat?

Exemple pràctic

Pas 1: Crear els components fills

Pas 2: Crear el component pare

Explicació del codi

Exercici pràctic

Exercici

Solució

Resum

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