Conceptos de Ciclo de Vida en React

Este repositorio contiene ejemplos simples de cómo funcionan los diferentes conceptos de ciclo de vida en React. Los conceptos de ciclo de vida son métodos especiales que los componentes de React pueden utilizar para controlar su comportamiento en diferentes momentos.

Contenido

• Constructor
• static getDerivedStateFromProps
• Render
• shouldComponentUpdate
• componentWillUnmount

Constructor

El constructor es el primer método que se llama cuando se crea un componente. Es útil para inicializar el estado y enlazar métodos.

import React, { Component } from 'react';

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

  // ...
}

static getDerivedStateFromProps

Este método estático se llama cuando las propiedades cambian y se utiliza para actualizar el estado del componente en función de esas propiedades.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.initialValue !== prevState.value) {
      return { value: nextProps.initialValue };
    }
    return null;
  }

  // ...
}

Render

El método render es donde se devuelve la estructura de la interfaz de usuario. No debe modificar el estado ni interactuar con el DOM.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <p>Hello, World!</p>;
  }
}

shouldComponentUpdate

Este método permite controlar si el componente debe volver a renderizarse después de recibir nuevas propiedades o cambios de estado. Puede mejorar el rendimiento al evitar renderizaciones innecesarias.

import React, { Component } from 'react';

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

  // ...
}

componentWillUnmount

Este método se llama antes de que un componente sea eliminado del DOM. Se utiliza para realizar limpieza, como cancelar suscripciones o temporizadores.

import React, { Component } from 'react';

class TimerComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0,
    };
    this.timerInterval = null;
  }

  componentDidMount() {
    this.timerInterval = setInterval(() => {
      this.setState((prevState) => ({
        time: prevState.time + 1,
      }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerInterval);
  }

  // ...
}