Método ReactJS UNSAFE_componentWillReceiveProps()

El componenteWillReceiveProps() se invoca antes de que nuestro componente React montado reciba nuevos accesorios. Se llama durante la fase de actualización del ciclo de vida de React . Se utiliza para actualizar el estado en respuesta a algunos cambios en nuestros accesorios. No podemos llamar a esto con accesorios iniciales durante el montaje porque React llama a este método solo cuando los accesorios de nuestro componente se han actualizado.

El método componentWillReceiveProps() ha quedado obsoleto en las últimas versiones de React según este problema . Se recomienda usar el método getDerivedStateFromProps() en su lugar, pero si aún queremos usar el componenteWillReceiveProps(), podemos hacerlo llamándolo UNSAFE_componentWillReceiveProps() . No se sugiere usar este método de acuerdo con React, es por eso que la palabra clave UNSAFE aparece al principio para enviar un mensaje amable a todos los desarrolladores de React para que dejen de usar este método. Este método se puede usar cuando el estado de un componente depende de los cambios en los accesorios.

Sintaxis:

class App extends Component {
  UNSAFE_componentWillReceiveProps(newProps) {
    // Action you want to execute
  }
}

Parámetros: acepta un parámetro, es newProps , que es el valor actualizado de los accesorios después de que el componente se representa en el DOM .

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: en este ejemplo, vamos a crear una aplicación que registre el valor de prop actualizado en la consola. Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
  
class App extends React.Component {
  
  constructor(props) {
     super(props)
  
     // Set initial state
     this.state = {
        count: 0
     }
  
     // Binding this keyword
     this.handleCount = this.handleCount.bind(this)
  };
  
  handleCount() {
    // Updating state
     this.setState({
       count: this.state.count + 1
     })
  }
  
  render() {
     return (
        // Passing state as props
        <div>
           <button onClick = 
              {this.handleCount}>Increase me!
           </button>
           <PropComponent data = {this.state.count} />
        </div>
     );
  }
}
  
class PropComponent extends React.Component {
  
  UNSAFE_componentWillReceiveProps(newProps) { 
  
    // Performing an action   
    console.log('Component is receiving new props', newProps);
  }
  
  render() {
     return (
  
        // Printing updated props value
        <div>
          <h1>My value is {this.props.data}</h1>
        </div>
     );
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: creamos un estado de cuenta con un valor inicial de 0 y una función handleCount para incrementar su valor actual en 1 en nuestro componente de clase de aplicación . Este último se activa como un evento onClick cuando hacemos clic en nuestro elemento de botón. Nuestro valor de estado aumenta cuando hacemos clic en el botón y este valor actualizado se pasa como accesorios a otro componente de clase PropComponent . Antes de que PropComponent reciba nuevos accesorios, registra los valores actualizados de los accesorios en la consola a través del método UNSAFE_componentWillReceiveProps(newProps) . De esta forma, podemos realizar cualquier acción justo antes de que un componente reciba nuevos accesorios. 

También aparece un mensaje de advertencia en la parte superior de la consola cuando se carga nuestro componente que nos dice claramente que este método no es recomendable para el uso que ya discutimos anteriormente.