de Evelyn Chan

Aflați elementele de bază ale elementelor de destructură în React

Aflati elementele de baza ale elementelor de recuzita pentru destructurare

Când am aflat pentru prima dată despre ES6, am ezitat să încep să îl folosesc. Auzisem o mulțime de lucruri grozave despre îmbunătățiri, dar, în același timp, tocmai mă obișnuisem cu felul bun de a face lucrurile originale și iată o nouă sintaxă aruncată asupra mea pentru a învăța.

Am evitat-o ​​pentru o vreme sub premisa „dacă nu se strică, nu o remediați”, dar recent mi-a plăcut simplitatea și faptul că devine norma în JavaScript.

Cu React, care acceptă pe deplin sintaxa ES6, destructurarea adaugă o serie de avantaje îmbunătățirii codului. Acest articol va trece în revistă elementele de bază ale destructurării obiectelor și modul în care se aplică la recuzită în React.

Motive pentru destructurare

Îmbunătățește lizibilitatea

Acesta este un avantaj uriaș în React atunci când transmiteți recuzită. Odată ce vă faceți timp pentru a vă distruge recuzita, puteți scăpa props / this.props în fața fiecărei prop.

Dacă vă abstrați componentele în fișiere diferite, veți avea, de asemenea, un loc la îndemână pentru a vă referi rapid la recuzita pe care o transmiteți fără a fi nevoie să schimbați filele. Această verificare dublă vă ajută să prindeți erori, cum ar fi transmiterea în exces a accesoriilor sau a greșelilor de tipar.

ad-banner

Puteți face un pas mai departe adăugând propType validare, care vă permite să definiți tipul fiecărui accesoriu pe care îl treceți. Când vă aflați într-un mediu de dezvoltare, acest lucru declanșează React pentru a înregistra un avertisment dacă tipul este diferit de cel definit.

Accesoriile pot fi dificil de urmărit în aplicațiile complexe, astfel încât să vă definiți în mod clar recuzita pe măsură ce le transmiteți este extrem de util pentru oricine vă citește codul.

Linii de cod mai scurte

Vedeți următoarele înainte de ES6:

var object = { one: 1, two: 2, three: 3 }
var one = object.one;var two = object.two;var three = object.three
console.log(one, two, three) // prints 1, 2, 3

Este lung, ciudat și are prea multe linii de cod. Odată cu destructurarea, codul dvs. devine mult mai clar.

În exemplul de mai jos, am redus efectiv numărul de linii la două:

let object = { one: 1, two: 2, three: 3 }
let { one, two, three } = object;
console.log(one, two, three) // prints 1, 2, 3

Zahar sintactic

Face codul să arate mai frumos, mai succint și ca cineva care știe ce face, l-a scris. Reiterez oarecum primul punct aici, dar din nou, dacă îmbunătățește lizibilitatea, de ce nu l-ați face?

Componente funcționale vs. clase

Destructurarea în React este utilă atât pentru componentele funcționale, cât și pentru cele de clasă, dar se realizează puțin diferit.

Să luăm în considerare o componentă părinte în aplicația noastră:

import React, { Component } from 'react';
class Properties extends Component {  constructor() {    super();    this.properties = [      {        title: 'Modern Loft',        type: 'Studio',        location: {          city: 'San Francisco',          state: 'CA',          country: 'USA'        }      },      {        title: 'Spacious 2 Bedroom',        type: 'Condo',        location: {          city: 'Los Angeles',          state: 'CA',          country: 'USA'        }      },    ];  }
render() {    return (      <div>        <Listing listing={this.properties[0]} />        <Listing listing={this.properties[1]} />      </div>    );  }}

Componente funcționale

În acest exemplu, vrem să transmitem un listing obiect din matricea noastră de proprietăți pentru redarea componentei copil.

Iată cum ar arăta o componentă funcțională:

const Listing = (props) => (  <div>    <p>Title: {props.listing.title}</p>    <p>Type: {props.listing.type}</p>    <p>      Location: {props.listing.location.city},      {props.listing.location.state},      {props.listing.location.country}    </p>  </div>);

Acest bloc de cod este pe deplin funcțional, dar arată teribil! Până ajungem la asta Listing componentă copil, știm deja că facem referire la o listă, deci props.listing arată și se simte redundant. Acest bloc de cod poate fi făcut să pară mult mai curat prin destructurare.

Putem realiza acest lucru în parametrul funcției în timp ce trecem în argumentul props:

const Listing = ({ listing }) => (  <div>    <p>Title: {listing.title}</p>    <p>Type: {listing.type}</p>    <p>      Location: {listing.location.city},      {listing.location.state},      {listing.location.country}    </p>  </div>);

Chiar mai bine, putem destructura în continuare obiectele imbricate ca mai jos:

const Listing = ({  listing: {    title,    type,    location: {      city,      state,      country    }  }}) => (  <div>    <p>Title: {title}</p>    <p>Type: {type}</p>    <p>Location: {city}, {state}, {country}</p>  </div>);

Puteți vedea cât de ușor este de citit? În acest exemplu, am distrus ambele listings iar cheile din interior listing.

Un gotcha obișnuit este destructurarea doar a cheilor, așa cum facem mai jos și încercarea de a accesa obiectul:

{ location: { city, state, country } }

În acest scenariu, nu am putea accesa location obiect printr-o variabilă denumită locație.

Pentru a face acest lucru, ar trebui să-l definim mai întâi printr-o soluție simplă:

{ location, location: { city, state, country } }

Acest lucru nu mi-a fost evident la început și, uneori, aș întâmpina probleme dacă aș vrea să trec un obiect de genul location ca suport după destructurarea conținutului acestuia. Acum ești pregătit să eviți aceleași greșeli pe care le-am făcut!

Componente ale clasei

Ideea este foarte aceeași în componentele clasei, dar execuția este puțin diferită.

Aruncați o privire mai jos:

import React, { Component } from 'react';
class Listing extends Component {  render() {    const {      listing: {        title,        type,        location: {          city,          state,          country        }      }    } = this.props;
return (      <div>        <p>Title: {title}</p>        <p>Type: {type}</p>        <p>          Location: {city}, {state}, {country}        </p>      </div>    )  }}

Este posibil să fi observat în exemplul părinte că putem distruge Component obiect în timp ce importăm React în componentele clasei. Acest lucru nu este necesar pentru componentele funcționale, deoarece nu vom extinde Component clasa pentru cei.

Apoi, în loc de a destructura în argument, vom destructura oriunde sunt numite variabilele. De exemplu, dacă luăm același lucru Listing componenta copil și refactorizarea acesteia într-o clasă, am distruge în render funcție în care se face referință la recuzită.

Dezavantajul destructurării componentelor clasei este că veți ajunge să destructurați aceleași elemente de recuzită de fiecare dată când îl utilizați într-o metodă. Deși acest lucru poate fi repetitiv, aș susține că un aspect pozitiv este că subliniază în mod clar care elemente de recuzită sunt utilizate în fiecare metodă.

În plus, nu va trebui să vă faceți griji cu privire la efectele secundare, cum ar fi schimbarea accidentală a unei referințe variabile. Această metodă păstrează metodele separate și curate, ceea ce poate fi un avantaj imens pentru alte operațiuni în timpul proiectelor dvs., cum ar fi depanarea sau testele de scriere.

Mulțumesc pentru lectură! Dacă acest lucru v-a ajutat, vă rugăm să bateți din palme și / sau să împărtășiți acest articol pentru a-i putea ajuta și pe alții! 🙂