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.

Comentarios (1)

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.