Componentes de clase en React

Hay dos tipos de componentes: de clase y funcionales. En este post voy a explicar los de clase.

Para empezar hay que tener en cuenta que los componentes de clase se escriben utilizando clases de ES6 y que deben extender la clase Component de React. Los componentes de clase son capaces de gestionar su propio estado y ciclo de vida, mientras que los funcionales teóricamente no, aunque podremos sobrellevarlo y casi parece que puedan.

Nada más fácil para entender como funciona un componente de clase que un ejemplo:

// Importamos React
import React from "react";

// Creamos una nueva clase extendiendo Component
class ExampleComponent extends React.Component {

  // El constructor, opcional
  constructor(props) {
    super(props);
    this.state = {}
  }

  // Existen métodos para controlar el ciclo de vida
  componentDidMount() {
    console.log("componentDidMount");
  }


  // Método render, el único obligatorio
  render() {
    return (
      <div>
        <h1>Example Component</h1>
        <p>This is a class component</p>
      </div>
    );
  }

}

En el ejemplo sólo he utilizado el método componentDidMount para la gestión del ciclo de vida, pero hay otros: esencialmente componentDidUpdate y componentWillUnmount. El primero se ejecuta cuando hay cambios en el state o las props, y el segundo, quizá*, antes de desmontarse el componente.

* No puedes depender de ese método para funciones críticas (notificar la salida al servidor, por ejemplo) ya que cerrar la pestaña de alguna manera también desmontaría el componente y no ejecutaría ese método.

Cómo usar componentDidUpdate

Dentro de componentDidUpdate podemos utilizar dos objetos, prevProps y prevState. Con ellos podrás buscar y analizar las diferencias para valorar lo que quieres hacer. Por ejemplo:

componentDidUpdate(prevProps, prevState) {

  if (this.props.isOpen !== prevProps.isOpen) {
    // Sabemos que isOpen ha cambiado
    if (this.props.isOpen) {
      // Y que ha cambiado de false a true...
    } else {
      // ...o que ha cambiado de true a false
    }
  }

}

Usar state y props

En los componentes de clase tenemos el objeto this, y es desde ahí desde donde podemos leer tanto el state como las props.

render() {
  return (
    <div>
      <h1>Example Component</h1>
      { this.state.loggedIn &&
        <p>Hola {this.props.name}</p>
      }
    </div>
  );
}

Actualizar el state

Mientras que las props no se pueden modificar por motivos obvios, el state sí, se hace a través del método setState (que también tenemos en this).

constructor(props) {
  super(props);
  this.state = {
    counter: 0,
  }
}

increaseCounter() {
  this.setState({
    counter: this.state.counter + 1,
  });
}

render() {
  return (
    <div>
      <h1>Counter: {this.state.counter}</h1>
      <button onClick={this.increaseCounter}>Increase</button>
    </div>
  );
}

El método increaseCounter también podría reducirse usando funciones flecha.

increaseCounter = () => this.setState({
  counter: this.state.counter + 1,
});

Cuando usar un componente de clase

Pues depende del proyecto y del componente. Mi consejo es que intentes no usarlos, porque lo recomendado en las últimas versiones de React es que se usen funcionales y hooks, que además suelen ser más sencillos de escribir y hay más documentación en internet.

Pero no hay una diferencia técnica tan importante, puedes usar los unos, los otros, o incluso tenerlos mezclados (abro paraguas). Si estás aprendiendo y tienes tiempo, te recomiendo que intentes escribir algunos componentes primero con clases y luego los conviertas a funcionales para poder ver sus diferencias y handicaps.

Photo by Ryan Quintal on Unsplash.