Explicar los nuevos métodos de ciclo de vida en React v16.3

React 16.3 ha introducido algunas actualizaciones importantes, como la nueva API Ref, cambios en los enlaces del ciclo de vida y mucho más. En este momento, nos centraremos en los nuevos métodos de ciclo de vida que introduce React 16.3. Con React 16.3, se desaconseja el uso de tres métodos de ciclo de vida, es decir (componentswillReceiveProps(), componentWillUpdate() y componentWillMount()). Estos métodos de ciclo de vida a menudo se usaban incorrectamente (como actualizaciones en el estado). Por lo tanto, estos ciclos de vida están desaprobando los ciclos de vida inseguros en los que agregan el prefijo «UNSAFE_» a estos ciclos de vida. Inseguro significa que estos ciclos de vida pueden generar algunos problemas en el código. 

React 16.3 ha introducido dos nuevos métodos de ciclo de vida: 

1. getDerivedStateFromProps()
2. getSnapshotBeforeUpdate()

Creación de una aplicación React:

Paso 1: para crear una aplicación de reacción, abra su símbolo del sistema y comience a escribir el siguiente comando:

npx create-react-app name-of-your-folder

Paso 2: después de seguir el comando anterior, se creará una carpeta con el nombre ‘nombre de su carpeta’ y luego se moverá a esta carpeta con el siguiente comando:

cd name-of-your-folder

Estructura del proyecto: La estructura del proyecto se verá así:

La estructura de tu carpeta de reacción.

getDerivedStateFromProps():   este enlace de ciclo de vida es un enlace de ciclo de vida estático. Se ejecuta cada vez que el componente recibe accesorios actualizados y brinda la oportunidad de devolver un objeto que se convertirá en el nuevo estado del componente a partir de entonces. Se utiliza para sincronizar las propiedades y los estados de los componentes. Este método se llama antes de cualquier actualización del componente.

Sintaxis:

class ExampleHook extends React.Component {
   static getDerivedStateFromProps(props, state) {
       // statements...
   }
}

Al combinarse con componentDidUpdate, este nuevo ciclo de vida debería cubrir todos los casos de uso del componente heredadoWillReceiveProps.

Ejemplo:

import React, { Component } from "react";
import Student from "./Student";
  
export class App extends Component {
    constructor(props) {
        super(props);
        console.log("APP-Constructor Called");
        console.log(props.name);
        this.state = {
            roll: "101",
        };
    }
    static getDerivedStateFromProps(props, state) {
        console.log("App-Get deriving state from props");
        console.log(props, state);
        return null;
    }
    render() {
        return (
            <div>
                <Student name="Rahul" />
            </div>
        );
    }
}
  
export default App;

Producción: 

getSnapshotBeforeUpdate(): Esto se ejecuta justo antes de que el componente se actualice, lo que significa justo antes de que sus cambios se confirmen en el DOM. Se llama a este método que muestra el valor anterior del estado. 

Sintaxis:

class ExampleHook extends React.Component {
   getSnapshotBeforeUpdate(prevProps, prevState) {
       // statements...
   }
}

Al combinarse con componentDidUpdate, este nuevo ciclo de vida debería cubrir todos los casos de uso del componente heredadoWillUpdate.

Ejemplo: 

import React, { Component } from "react";
  
export class App extends Component {
    constructor(props) {
        super(props);
        console.log("APP-Constructor Called");
        console.log(props.name);
        this.state = {
            name: "first",
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ name: "last" });
        }, 3000);
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        document.getElementById(`prev`).innerHTML = prevState.name;
  
        return prevState.name;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(snapshot);
        document.getElementById(`current`).innerHTML = this.state.name;
    }
    render() {
        return (
            <div>
                <div id="prev">{this.state.name}</div>
                <div id="current">{this.state.name}</div>
            </div>
        );
    }
}
  
export default App;

Producción: