Una introducción a React: diferencia entre el componente de clase y el componente funcional

¿Qué es un componente?

En primer lugar, antes de profundizar en este tema, debemos saber perfectamente qué es realmente un componente.

Un componente (en React) se describiría como un bloque o parte de nuestra aplicación que podría reutilizarse en todo el proyecto (y otros, tal vez), generalmente está relacionado con un elemento UI y su comportamiento.

Ahora, suponiendo que conozca lo básico, verifiquemos los dos tipos de componentes que podemos crear en un proyecto React, Componentes de clase y Componentes funcionales.

Componente de clase

Esto también se llama componente básico. Desde ECMAScript 2015, tenemos "clases" en javascript. React utiliza esta sintaxis para crear un componente con estado y ciclo de vida. El estado se usa comúnmente para cambiar el comportamiento de nuestro componente o sus hijos.

// App.js
import React from 'react'
import Lamp from 'Lamp'

class App extends React.Component {
  render() {
    return (
      <Lamp />
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('react-example')
);

Vamos a descifrar este código. Aquí tenemos una "clase JS" que hereda la funcionalidad de React.Component, luego declaramos su constructor que recibió los props como argumento. A continuación, llamamos super, para pasar los datos a la clase principal Component, esto es necesario cuando creamos este tipo de componente.

Los "props" es un objeto que tiene todos los atributos que usamos en el componente como etiqueta.

El componente Lamp (lámpara) tiene un propósito básico, representa (render) un bloque HTML con un texto y un botón.

Al hacer clic en el botón switch se enciende o apaga la lámpara, aquí es donde nuestro estado entra en el juego, en la línea 4, inicializamos el estado de la lámpara, y después de eso, declaramos el método switchLight, que cambiará el estado de nuestra lámpara.

este "state" (estado) es un objeto con algunas propiedades que cambiarán en el momento de la ejecución de la clase. No debe cambiarse directamente, sino con el método setState.

Puede cambiar el estado de esta manera a:

this.setState((state) => {
    return { isTurnedOn: !state.isTurnedOn }
})

---

Componente funcional

Ahora, si queremos construir un componente mínimo, simple y sin estado, esto lo ayudará a reducir la cantidad de código utilizado y a aplicar el principio DRY más fácilmente. El componente funcional es una función de JavaScript que devuelve uno o más elementos Jxs.

Veamos este ejemplo de un Componente de Bulb (Bombilla).

import React from 'react'

export default function Bulb({ lampState }) {
  return lampState ?
    (<span>
      <img src={'https://cdn2.iconfinder.com/data/icons/flat-icons-19/512/Light_bulb.png'} width={50} />
    </span>) :
    (<span>
      <img src={'https://img.icons8.com/ios/1600/light-on.png'} width={50} />
    </span>)
}

Aquí, tenemos una función regular, recibe un objeto desestructurado con una propiedad llamada lampState, este se convierte en una variable local y evaluamos si es verdadero o falso para devolver una etiqueta img diferente .

Ahora, podemos usarlo en el componente Lamp para mostrar cómo pueden funcionar bien juntos.

// Lamp.js
import React from 'react'
import Bulb from 'Bulb'

export default class Lamp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isTurnedOn : false
    }
  }

  switchLight = () => {
    this.setState({
      isTurnedOn : !this.state.isTurnedOn
    })
  }

  render() {
    return (
      <div>
        <Bulb lampState={this.state.isTurnedOn} />
        <p>The lamp is <b>{this.state.isTurnedOn ? 'on' : 'off'}</b></p>
        <button onClick={this.switchLight}>switch</button>
      </div>
    )
  }
}

Eso es todo, cuando hacemos clic en el botón del interruptor, la imagen de la bombilla encendida cambia.

¿Qué hay de los Hooks?

Los hooks son la característica más reciente que le permite usar el estado en el componente funcional. Esto debe explicarse con más detalles, porque necesitamos profundizar algunos conceptos nuevos de React, creo que merece su propio artículo.

Gracias por leer, si te gustó o no, dame tu opinión.