Módulo 3: Desarrollo de Componentes

3.1 Componentes Funcionales y de Clase

Diferencias y ventajas:

Los componentes funcionales y los componentes de clase son dos enfoques diferentes para crear componentes en React, cada uno con sus propias ventajas y casos de uso.

Los componentes funcionales son más simples y concisos, ideales para componentes que no requieren estado interno ni métodos del ciclo de vida. Son fáciles de entender, probar y optimizar.

Los componentes de clase, por otro lado, son más potentes y versátiles. Pueden manejar el estado interno y los métodos del ciclo de vida. Son útiles cuando se necesita un mayor control sobre el componente y sus interacciones.

Creación y uso de componentes funcionales:

import React from 'react';

const Saludo = (props) => {
  return <p>Hola, {props.nombre}!</p>;
};

// Uso del componente Saludo
<Saludo nombre="María" />;
    

Creación y uso de componentes de clase:

import React from 'react';

class Saludo extends React.Component {
  render() {
    return <p>Hola, {this.props.nombre}!</p>;
  }
}

// Uso del componente Saludo
<Saludo nombre="Pedro" />;
    

3.2 Ciclo de Vida de los Componentes

Montaje, actualización y desmontaje:

Los componentes en React pasan por tres fases principales durante su ciclo de vida: montaje, actualización y desmontaje.

Montaje (Mounting): Ocurre cuando un componente se crea e ingresa en el DOM. Se invoca el constructor, render() y otros métodos especiales.

Actualización (Updating): Sucede cuando el componente recibe nuevas props o se actualiza su estado. Se invocan métodos como shouldComponentUpdate(), render() y componentDidUpdate().

Desmontaje (Unmounting): Se produce cuando el componente es eliminado del DOM. Se invoca el método componentWillUnmount().

Métodos del ciclo de vida:

Algunos métodos del ciclo de vida de los componentes de clase:

• constructor(props): Se llama cuando se crea una instancia del componente.
• render(): Devuelve la representación del componente en el DOM.
• componentDidMount(): Se ejecuta después de que el componente se monta en el DOM.
• shouldComponentUpdate(nextProps, nextState): Permite controlar si el componente debe actualizarse o no.
• componentDidUpdate(prevProps, prevState): Se llama después de que el componente se actualiza en el DOM.
• componentWillUnmount(): Se ejecuta antes de que el componente sea desmontado y eliminado del DOM.

Uso adecuado de cada fase:

Montaje: Inicializar el estado y realizar solicitudes de datos iniciales.

Actualización: Realizar tareas basadas en cambios de props o estado, como actualizar datos, realizar solicitudes AJAX, etc.

Desmontaje: Limpiar tareas, cancelar solicitudes, liberar recursos, etc.

Es fundamental comprender el ciclo de vida de los componentes para poder gestionar adecuadamente su comportamiento y optimizar el rendimiento de las aplicaciones React.

En los próximos módulos, profundizaremos en la interacción y los eventos en React, así como en la comunicación entre componentes.