El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre el estado (state) en React, cómo se utiliza para gestionar datos dentro de un componente y cómo actualizarlo de manera eficiente. El estado es una de las características más poderosas de React, ya que permite que los componentes sean dinámicos y reactivos a los cambios.

¿Qué es el Estado?

El estado es un objeto que representa la información que puede cambiar durante el ciclo de vida de un componente. A diferencia de las props, que son inmutables y se pasan desde un componente padre a un componente hijo, el estado es mutable y se gestiona dentro del propio componente.

Características del Estado:

Mutable: Puede cambiar a lo largo del tiempo.
Privado: Solo el componente que lo define puede acceder y modificar su estado.
Reactivo: Cuando el estado cambia, React vuelve a renderizar el componente para reflejar los cambios.

Uso del Estado en Componentes de Clase

En los componentes de clase, el estado se define en el constructor y se actualiza usando el método setState.

Ejemplo Básico:

import React, { Component } from 'react';

class Contador extends Component {
  constructor(props) {
    super(props);
    // Definición del estado inicial
    this.state = {
      contador: 0
    };
  }

  // Método para incrementar el contador
  incrementar = () => {
    this.setState({ contador: this.state.contador + 1 });
  }

  render() {
    return (
      <div>
        <p>Contador: {this.state.contador}</p>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}

export default Contador;

Explicación del Código:

Constructor: Se inicializa el estado en el constructor del componente.
Método incrementar: Utiliza setState para actualizar el estado.
Renderizado: El valor del estado se muestra en el DOM y se actualiza cuando se hace clic en el botón.

Uso del Estado en Componentes Funcionales con Hooks

Con la introducción de los Hooks en React 16.8, podemos gestionar el estado en componentes funcionales usando el hook useState.

Ejemplo Básico:

import React, { useState } from 'react';

const Contador = () => {
  // Definición del estado inicial usando useState
  const [contador, setContador] = useState(0);

  // Función para incrementar el contador
  const incrementar = () => {
    setContador(contador + 1);
  }

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}

export default Contador;

Explicación del Código:

useState: Se utiliza para definir el estado inicial y una función para actualizarlo.
Función incrementar: Llama a setContador para actualizar el estado.
Renderizado: Similar al ejemplo de clase, el valor del estado se muestra y se actualiza en el DOM.

Ejercicio Práctico

Ejercicio:

Crea un componente llamado Toggle que tenga un botón para alternar entre "Encendido" y "Apagado". El estado inicial debe ser "Apagado".

Solución:

import React, { useState } from 'react';

const Toggle = () => {
  const [estado, setEstado] = useState('Apagado');

  const alternar = () => {
    setEstado(estado === 'Apagado' ? 'Encendido' : 'Apagado');
  }

  return (
    <div>
      <p>Estado: {estado}</p>
      <button onClick={alternar}>Alternar</button>
    </div>
  );
}

export default Toggle;

Explicación del Código:

useState: Define el estado inicial como "Apagado".
Función alternar: Cambia el estado entre "Encendido" y "Apagado".
Renderizado: Muestra el estado actual y un botón para alternar el estado.

Resumen

En esta sección, hemos aprendido:

Qué es el estado en React y sus características.
Cómo gestionar el estado en componentes de clase usando setState.
Cómo gestionar el estado en componentes funcionales usando el hook useState.
Hemos practicado con un ejercicio para reforzar los conceptos aprendidos.

En el próximo módulo, profundizaremos en el manejo de eventos en React, lo que nos permitirá crear aplicaciones más interactivas y dinámicas.

State: Gestión del Estado del Componente

¿Qué es el Estado?

Características del Estado:

Uso del Estado en Componentes de Clase

Ejemplo Básico:

Explicación del Código:

Uso del Estado en Componentes Funcionales con Hooks

Ejemplo Básico:

Explicación del Código:

Ejercicio Práctico

Ejercicio:

Solución:

Explicación del Código:

Resumen

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa