Desestructuración de Props en ReactJS

La desestructuración es una propiedad simple que se usa para hacer que el código sea mucho más claro y legible, principalmente cuando pasamos accesorios en React.

¿Qué es la Desestructuración?

• La desestructuración es una característica de JavaScript, se utiliza para sacar secciones de datos de una array u objetos, podemos asignarlos a nuevas variables propias creadas por el desarrollador.
• En la desestructuración, no cambia una array ni ningún objeto, hace una copia del objeto o elemento de array deseado asignándolos en sus propias variables nuevas, luego podemos usar esta nueva variable en componentes React (clase o funcional).
• Hace que el código sea más claro. Cuando accedemos a los accesorios usando esta palabra clave, tenemos que usar this/ this.props en todo el programa, pero mediante el uso de la reestructuración, podemos descartar this/ this.props asignándolos en nuevas variables.
• Esto es muy difícil de monitorear accesorios en aplicaciones complejas, por lo que al asignar estos accesorios en nuevas variables propias podemos hacer que un código sea más legible.

Ventajas de la desestructuración:

• Facilita la vida del desarrollador, al asignar sus propias variables.
• Los datos anidados son más complejos, lleva tiempo acceder a ellos, pero mediante el uso de la desestructuración, podemos acceder más rápido a los datos anidados.
• Mejora la sostenibilidad , la legibilidad del código.
• Ayuda a reducir la cantidad de código utilizado en una aplicación.
• Recorta el número de pasos tomados para acceder a las propiedades de los datos.
• Proporciona componentes con las propiedades de datos exactas.
• Ahorra tiempo al iterar sobre una array de objetos varias veces.
• En ReactJS, usamos operadores ternarios varias veces dentro de la función de representación, sin desestructurarlos, parece complejo y difícil acceder a ellos, pero mediante el uso de desestructuraciones, podemos mejorar la legibilidad de los operadores ternarios.

¿Cómo usar Destructuring?

Podemos usar la Desestructuración en el siguiente método en ReactJS:

1. Usar el método this.props

En este ejemplo, simplemente mostraremos algunas palabras usando desestructuración y sin desestructuración.

Estructura del proyecto: Tendrá el siguiente aspecto.

La desestructuración da acceso al uso de accesorios en un formato más legible y descarta la necesidad de accesorios para cada propiedad.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde imprimiremos nuestro código de componente.

import React from "react"
import Greet from './component/Greet'
    
 class App extends React.component{
   render(){
     return(
       <div className = "App">
                 <Greet active="KAPIL GARG"  activeStatus = "CSE"/>
       </div>
    );
  }
}
export default App;

Greet.js: en este archivo, escribiremos el código del componente sobre el proceso de desestructuración.

• Sin Desestructurar:

  Aplicación.js

  import React from 'react';    const Greet = props =>{     return (         <div>             <div className="XYZ">                <h3> {props.active} </h3>             </div>                <div className="PQR">                 <h1>{props.activeStatus}</h1>             </div>         </div>         )   } export default Greet;

  Salida: aquí los accesorios vuelven a aparecer innecesariamente dentro del retorno, por lo que se utilizan nombres más concisos de estas propiedades de desestructuración .

  

  Salida para Sin Desestructurar

• Con Desestructuración:

  Aplicación.js

  import React from 'react';    const Greet = props =>{     // Destructuring     const {active, activeStatus} = props;     return (         <div>             <div className="XYZ">                <h3> {active} </h3>             </div>                <div className="PQR">                 <h1>{activeStatus}</h1>             </div>         </div>         )   } export default Greet;

  Producción:

  

  Salida para con desestructuración

2. Usando el método de extracción:

Hay muchas ocasiones en las que el valor extraído durante la desestructuración ya no existe, entonces en esta condición podemos usar el comportamiento predeterminado de la desestructuración, en esto, aplicar un valor predeterminado a las propiedades recién declaradas de la desestructuración.

En el siguiente código, activeObject se establecerá como verdadero si no está definido en this.props .

Const {active, activeStatus, activeObject = true } = this.props

3. Usando el método de reasignación:

Se puede utilizar un nombre de variable que no sea una copia de la propiedad que se está desestructurando. Esto se logra reasignando como se muestra a continuación.

En el siguiente código, las propiedades active, activeStatus se han desestructurado y reasignado como variables denominadas generation, objectMessage.

const { active : generating, activeStatus : objectMessage} = this.props