Tipos de Componentes en React: Funcionales y de Clase

Tipos de Componentes en React: Funcionales y de Clase

Introducción

React 😍 💻 - #4 Los Componentes (Funcionales y Clases) | Curso de React.js  - YouTube

En React, los componentes son el corazón de cualquier aplicación, y existen diferentes formas de crearlos. Dependiendo de las necesidades y estilo de desarrollo, puedes optar por componentes funcionales o componentes de clase. En este artículo, explicaremos los tipos de componentes en React, cuándo usar cada uno y cómo han evolucionado con el tiempo.

¿Qué son los componentes en React?

Un componente en React es una pieza reutilizable de la interfaz de usuario que puede manejar su propio estado y lógica. React permite crear aplicaciones dinámicas y escalables al descomponer la interfaz en componentes más pequeños. Estos componentes pueden ser de dos tipos principales: funcionales y de clase.

Componentes funcionales

Los componentes funcionales son simplemente funciones que reciben propiedades (props) y retornan elementos de React. Antes, los componentes funcionales eran más simples ya que no podían manejar su propio estado ni ciclo de vida, pero esto cambió con la introducción de los Hooks en React 16.8.

Ejemplo de un componente funcional

				
					function Saludo(props) {
  return <h1>Hola, {props.nombre}!</h1>;
}

				
			

Ventajas de los componentes funcionales

  • Simplicidad: Al ser funciones, son fáciles de leer y mantener.
  • Mejor rendimiento: En muchos casos, los componentes funcionales son más rápidos que los de clase.
  • Hooks: Con el uso de Hooks como useState y useEffect, puedes gestionar el estado y los efectos secundarios dentro de un componente funcional.

Uso de Hooks en un componente funcional

				
					import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Incrementar
      </button>
    </div>
  );
}
				
			

Componentes de clase

Antes de los Hooks, los componentes de clase eran la única forma de tener estado y manejar el ciclo de vida de un componente en React. Estos componentes son clases ES6 que extienden de React.Component y tienen un método render() que retorna el JSX.

Ejemplo de un componente de clase

				
					import React, { Component } from 'react';

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

Ciclo de vida en los componentes de clase

Los componentes de clase manejan varios métodos de ciclo de vida como componentDidMount, componentDidUpdate y componentWillUnmount, que permiten ejecutar código en momentos específicos del ciclo de vida del componente.

Desventajas de los componentes de clase

  • Más complejos: Comparados con los componentes funcionales, requieren más código y pueden ser más difíciles de entender.
  • Obsolescencia: Desde la introducción de los Hooks, los componentes de clase están siendo reemplazados en muchos casos, aunque siguen siendo soportados.

Comparación entre componentes funcionales y de clase

Cuándo usar componentes funcionales

  • Cuando no necesitas manejar estado complejo o ciclo de vida.
  • Si prefieres una sintaxis más simple y menos verbosa.
  • Al utilizar Hooks para gestionar el estado y los efectos secundarios.

Cuándo usar componentes de clase

  • Si estás trabajando en un proyecto más antiguo que usa componentes de clase.
  • Cuando estás más familiarizado con el ciclo de vida clásico de los componentes.

Ejemplo práctico: Convertir un componente de clase a funcional

Supongamos que tienes un componente de clase que muestra un contador, puedes refactorizarlo en un componente funcional utilizando Hooks.

Componente de clase

				
					class Contador extends React.Component {
  constructor(props) {
    super(props);
    this.state = { cuenta: 0 };
  }

  incrementar = () => {
    this.setState({ cuenta: this.state.cuenta + 1 });
  };

  render() {
    return (
      <div>
        <p>Has hecho clic {this.state.cuenta} veces</p>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}
				
			

Componente funcional con Hooks

				
					import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>Incrementar</button>
    </div>
  );
}
				
			

Conclusión

Tanto los componentes funcionales como los de clase tienen su lugar en el ecosistema de React, aunque con la llegada de los Hooks, los componentes funcionales se han vuelto la opción más recomendada. Si bien es importante entender ambos tipos, los componentes funcionales ofrecen una mayor simplicidad y flexibilidad, lo que los hace preferibles para la mayoría de los casos en los desarrollos modernos.

Links de referencia: React.js: Qué tipos de componentes posee este frameworkComponentes de React DOMComponentes en React.js

Facebook
X
LinkedIn
Reddit
Pinterest
Threads

Post relacionados

Post recientes

Search