Explicar en detalle las técnicas del ciclo de vida de los componentes de React

Los componentes de React son los bits de código reutilizables e independientes que ayudan a construir la interfaz de usuario de una página web. Cada uno de estos componentes tiene varios métodos de ciclo de vida que se invocan en diferentes etapas de su ciclo de vida. Se requieren principalmente para liberar los recursos ocupados por los múltiples componentes que ayudan a que la página web se muestre sin problemas y brinde a los usuarios una gran experiencia. Hay 4 etapas en el ciclo de vida de un componente de reacción.

Requisito previo: para comprender estos conceptos, debe comprender los conceptos básicos de React.

• React.js (Introducción y funcionamiento)

1. Inicialización: Es la primera etapa del ciclo de vida de los componentes de React. En esta etapa, el componente se define con los accesorios predeterminados y su estado inicial en el constructor del componente. Esta fase ocurre solo una vez en el ciclo de vida antes de que se le pase la creación del componente o cualquier accesorio del padre y consta de los siguientes métodos que se llaman en el mismo orden.

• constructor(): Este método se llama antes de que se monte el componente. Esto solo se usa para dos propósitos: inicializar el estado local asignando un objeto a » this.state» y vinculando los métodos del controlador de eventos a una instancia. El siguiente fragmento de código es un buen ejemplo de su uso.

Nota: Los siguientes métodos solo funcionan con el módulo «create-react-class» y generarían errores con las clases ES6.

• getDefaultProps(): este método se puede utilizar para definir el valor predeterminado de » this.props «. Además, necesitamos inicializar createReactClass antes de escribir cualquier otra cosa para usar estos métodos. Podemos ver un ejemplo de su uso a continuación.

var createReactClass = require('create-react-class');
var Meeting = createReactClass({
  getDefaultProps: function() {
    return {
      dialogue: 'Good Afternoon!'
    };
  },
});

• getInitialState(): este método se puede utilizar para definir el valor predeterminado de » this.state «. El fragmento de código a continuación mostraría un mensaje de saludo «¡Hola!» cuando hacemos clic en el botón en la página web de salida.

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  
  handleClick: function() {
    alert(this.state.message);
  },
  
  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

2. Montaje: Es la segunda etapa del ciclo de vida de un componente React. En esta etapa, el componente se monta en el DOM y se representa por primera vez en la página web después de inicializar el componente. Consiste en los siguientes métodos que se llaman en el mismo orden.

• getDerivedStateFromProps(): este método se invoca en el montaje inicial y cualquier actualización posterior justo antes de llamar al método render() . Para actualizar el estado, devuelve un objeto y para actualizar nada, devuelve nulo.
• render(): este método es responsable de devolver un único elemento de Node HTML raíz definido en cada componente. Cuando se llama, este método examina “ this.props” y “ this.state” y devuelve uno de los siguientes tipos:

1. Reaccionar elementos
2. arrays y fragmentos
3. Portales
4. String y números
5. Booleanos o nulo

• componentDidMount(): este método se invoca inmediatamente después del método render() . Ahora, podemos realizar cualquier operación de consulta con el DOM.

Note: The method below is considered legacy and should be avoided in new code.

• componentWillMount(): este método se invoca justo antes del método render() . El componente no se volverá a procesar si se llama a setState() dentro de este método.

componentWillMount() { 
    this.setState({ name: "Component will mount." });
}

3. Actualización: Es la tercera etapa del ciclo de vida de un componente React. En esta etapa, el estado y las propiedades se actualizan siguiendo varios eventos del usuario, como hacer clic en un botón, presionar una tecla determinada, etc. Podemos comunicarnos con la jerarquía de los componentes y manejar la interacción del usuario en la página web. Nos permite asegurarnos de que el componente presenta su última versión según lo requerido, por lo tanto, se llama varias veces. Consta de los siguientes métodos.

• shouldComponentUpdate(): este método se invoca antes que el método render() cuando se reciben nuevas propiedades o estados y se decide que el componente actualice el DOM. Se puede utilizar como optimización del rendimiento y ayuda a controlar el comportamiento de las actualizaciones del componente. El componente se actualizará si este método devuelve verdadero u omitirá la actualización si devuelve falso.
• render(): este método se invoca nuevamente para examinar » this.props» y » this.state». El código dentro del método render() se invocará nuevamente si shouldComponentUpdate() devuelve falso para que el componente se muestre correctamente.
• getSnapshotBeforeUpdate(): este método se invoca justo antes de que el DOM se actualice con la última salida renderizada. Ayuda a capturar información antes de que se cambie potencialmente (como la posición de desplazamiento) del DOM. Devuelve un valor de instantánea o nulo.
• componentDidUpdate(): este método se invoca inmediatamente después de que se actualiza el componente. Podemos usar este método para ejecutar un bloque de código una vez después de la representación. No se llama para la representación inicial.

Note: The methods below are considered legacy and should be avoided in new code.

• componentWillUpdate() : este método se invoca cuando se reciben nuevos accesorios o estados justo antes de renderizar el componente. Se puede utilizar para prepararse antes de que se produzca una actualización. Si shouldComponentUpdate() devuelve falso, no se llamará. Este método no se llama para el renderizado inicial.

componentWillUpdate() { 
    this.setState({ name: "Component will update." });
}

• componentWillRecieveProps() : este método se invoca antes de que un componente montado reciba nuevos accesorios. Para realizar la transición de estado usando el método “ this.setState()” , debemos comparar “ this.props” y nextProps si queremos actualizar el estado en respuesta a los cambios de prop. React solo llama a este método si se actualizan algunos de los accesorios de los componentes. No llama a este método con accesorios iniciales durante la etapa de montaje.

componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps);
    this.setState(nextProps);
}

4. Desmontaje: Es la cuarta y última etapa del ciclo de vida de los componentes de React. Se invoca cuando la instancia de los componentes se desmonta y destruye del DOM. Esta etapa solo contiene un único método.

• componentWillUnmount(): este método se invoca inmediatamente antes de que un componente se desmonte y destruya de forma permanente. Realiza las tareas de limpieza necesarias, como escuchas de eventos, limpieza de elementos DOM, invalidación de temporizadores o cancelación de requests de red. No podemos volver a montar un componente después de desmontar su instancia.

Ejemplo: echemos un vistazo al fragmento de código a continuación que muestra una demostración de la mayoría de los métodos de ciclo de vida sobre los que hemos leído hasta ahora.

En primer lugar, cree una aplicación de reacción y abra el archivo index.js desde la carpeta src.

src/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
class LifecycleStages extends React.Component {
  
  // Initialization stage
  constructor(props) {
    super(props);
    this.state = { name: "GeeksForGeeks" };
  }
  
  // Mounting stage
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps()");
  }
  
  changeState() {
    this.setState({ name: "Geek!" });
  }
  
  render() {
    return (
      <div>
        <h2>React components' lifecycle methods</h2>
          
<p>Hello {this.state.name}</p>
  
        <button onClick={this.changeState.bind(this)}>Don't Click.</button>
      </div>
    );
  }
  
  componentDidMount() {
    console.log("componentDidMount()");
  }
  
  componentWillMount() {
    console.log("componentDidMount()");
  }
  
  // Updating stage
  shouldComponentUpdate(newProps, newState) {
    console.log("shouldComponentUpdate()");
    return true;
  }
  
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate()");
  }
  
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate()");
  }
  
  // Unmounting stage
  componentWillUnmount() {
    console.log("Component will unmount.");
  }
}
  
export default LifecycleStages;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

npm start

Producción: