En React, los componentes de clase tienen una serie de métodos especiales que se llaman en diferentes etapas de la vida de un componente. Estos métodos se conocen como métodos del ciclo de vida. Entender estos métodos es crucial para manejar correctamente el estado y los efectos secundarios en tus componentes.

El ciclo de vida de un componente de React se puede dividir en tres fases principales:

1. Montaje (Mounting): Cuando el componente se crea e inserta en el DOM.
2. Actualización (Updating): Cuando el componente se actualiza debido a cambios en las props o el estado.
3. Desmontaje (Unmounting): Cuando el componente se elimina del DOM.

1. constructor()

   • Se llama antes de que el componente se monte.
   • Se utiliza para inicializar el estado y enlazar métodos.

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

2. componentDidMount()

   • Se llama inmediatamente después de que el componente se haya montado.
   • Ideal para realizar solicitudes de datos, suscripciones, o cualquier configuración que requiera un DOM.

   class MyComponent extends React.Component {
     componentDidMount() {
       // Realizar una solicitud de datos
       fetch('/api/data')
         .then(response => response.json())
         .then(data => this.setState({ data }));
     }
   }
   

1. shouldComponentUpdate(nextProps, nextState)

   • Se llama antes de que el componente se actualice.
   • Devuelve true o false para determinar si el componente debe actualizarse.
   • Útil para optimizar el rendimiento.

   class MyComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
       return nextState.count !== this.state.count;
     }
   }
   

2. componentDidUpdate(prevProps, prevState)

   • Se llama inmediatamente después de que el componente se haya actualizado.
   • Útil para realizar operaciones que dependen del DOM actualizado.

   class MyComponent extends React.Component {
     componentDidUpdate(prevProps, prevState) {
       if (prevState.count !== this.state.count) {
         console.log('El estado count ha cambiado');
       }
     }
   }
   

1. componentWillUnmount()

   • Se llama inmediatamente antes de que el componente se desmonte y destruya.
   • Ideal para limpiar suscripciones, temporizadores, o cualquier recurso que deba ser liberado.

   class MyComponent extends React.Component {
     componentWillUnmount() {
       // Limpiar suscripciones
       clearInterval(this.timerID);
     }
   }
   

A continuación, se muestra un ejemplo completo de un componente de clase que utiliza varios métodos del ciclo de vida:

Crea un componente de clase que:

1. Inicialice un estado con una propiedad text que sea una cadena vacía.
2. Use componentDidMount para establecer un temporizador que actualice text a "Hello, World!" después de 3 segundos.
3. Use componentWillUnmount para limpiar el temporizador.

Los métodos del ciclo de vida de React son herramientas poderosas para controlar el comportamiento de los componentes en diferentes etapas de su existencia. Comprender cuándo y cómo usar estos métodos te permitirá construir aplicaciones React más eficientes y manejables. En el próximo módulo, exploraremos los Hooks de React, que ofrecen una forma más moderna y funcional de manejar el estado y los efectos secundarios en los componentes funcionales.