Naučite osnove rekonstrukcije rekonstrukcije u Reactu

Kad sam prvi put saznao za ES6, dvoumio sam se da li bih ga počeo koristiti. Čula sam puno dobrih stvari o poboljšanjima, ali istodobno, tek sam se navikla na dobar stari izvorni način rada i evo nove sintakse koja mi je bačena kako bih naučila.

Izbjegavao sam ga neko vrijeme pod pretpostavkom da "ako se ne pokvari, nemojte ga popravljati", ali nedavno sam zavolio njegovu jednostavnost i činjenicu da to postaje norma u JavaScript-u.

S Reactom, koji u potpunosti prihvaća sintaksu ES6, destrukturiranje dodaje mnoštvo prednosti poboljšanju vašeg koda. Ovaj će članak proći kroz osnove destrukturiranja objekata i kako se to odnosi na rekvizite u Reactu.

Razlozi za destrukciju

Poboljšava čitljivost

Ovo je velika prednost u Reactu kada prolazite niz rekvizite. Jednom kada odvojite vrijeme za destrukciju rekvizita, možete se riješiti props / this.propsispred svakog rekvizita.

Ako apstrahirate svoje komponente u različite datoteke, imat ćete i zgodno mjesto za brzo upućivanje na rekvizite koje prenosite bez potrebe za promjenom kartica. Ova dvostruka provjera pomaže vam uhvatiti pogreške kao što su prosljeđivanje viška rekvizita ili pogreške u kucanju.

Možete ići korak dalje dodavanjem propTypeprovjere valjanosti, koja vam omogućuje da definirate vrstu svakog rekvizita koji prođete. Kada ste u razvojnom okruženju, to pokreće Reagiranje da zabilježi upozorenje ako se tip razlikuje od definiranog .

Rekvizite može biti teško pratiti u složenim aplikacijama, pa je jasno definiranje rekvizita dok ih prenosite neizmjerno korisno za svakoga tko čita vaš kôd.

Kraći redovi koda

Pogledajte sljedeće prije 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

Dug je, nezgrapan i uzima previše redaka koda. Destrukturiranjem vaš kôd postaje mnogo jasniji.

U primjeru u nastavku učinkovito smo smanjili broj redaka na dva:

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

Sintaktički šećer

Čini da kod izgleda ljepše, sažetije i kao da ga je napisao netko tko zna što radi. Ovdje donekle ponavljam prvu točku, ali opet, ako poboljšava čitljivost, zašto to ne biste učinili?

Funkcionalne naspram komponenata klase

Destrukturiranje u Reactu korisno je i za funkcionalne i za klasne komponente, ali postiže se malo drugačije.

Razmotrimo nadređenu komponentu u našoj aplikaciji:

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 ( ); }}

Funkcionalne komponente

U ovom primjeru želimo prenijeti listingobjekt iz niza svojstava da bi se podređena komponenta prikazala.

Evo kako bi izgledala funkcionalna komponenta:

const Listing = (props) => ( 

Title: {props.listing.title}

Type: {props.listing.type}

Location: {props.listing.location.city}, {props.listing.location.state}, {props.listing.location.country}

);

Ovaj blok koda potpuno je funkcionalan, ali izgleda užasno! Kad dođemo do ove Listingpodređene komponente, već znamo da upućujemo na popis, pa props.listingizgleda i čini se suvišnim. Ovaj blok koda može se učiniti destrukturiranjem mnogo čišćim.

To možemo postići u parametru funkcije dok prosljeđujemo argument props:

const Listing = ({ listing }) => ( 

Title: {listing.title}

Type: {listing.type}

Location: {listing.location.city}, {listing.location.state}, {listing.location.country}

);

Još bolje, možemo dalje destrukturirati ugniježđene objekte kao dolje:

const Listing = ({ listing: { title, type, location: { city, state, country } }}) => ( 

Title: {title}

Type: {type}

Location: {city}, {state}, {country}

);

Možete li vidjeti koliko je ovo lakše čitati? U ovom smo primjeru destrukturirali listingsi tipke i unutra listing.

Uobičajena poteškoća je destrukturiranje samo tipki kao što to činimo u nastavku i pokušaj pristupa objektu:

{ location: { city, state, country } }

U ovom scenariju ne bismo mogli pristupiti locationobjektu putem varijable s imenom lokacija.

In order to do so, we’d have to define it first with a simple fix like so:

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

This wasn’t glaringly obvious to me at first, and I’d occasionally run into problems if I wanted to pass an object like location as a prop after destructuring its contents. Now you’re equipped to avoid the same mistakes I made!

Class Components

The idea is very much the same in class components, but the execution is a little different.

Take a look below:

import React, { Component } from 'react';
class Listing extends Component { render() { const { listing: { title, type, location: { city, state, country } } } = this.props;
return ( 

Title: {title}

Type: {type}

Location: {city}, {state}, {country}

) }}

You may have noticed in the parent example that we can destructure the Component object as we import React in class components. This isn’t necessary for functional components as we won’t be extending the Component class for those.

Next, instead of destructuring in the argument, we destructure wherever the variables are being called. For example, if we take the same Listing child component and refactor it into a class, we would destructure in the render function where the props are being referenced.

The downside to destructuring in class components is that you’ll end up destructuring the same props each time you use it in a method. Although this can be repetitive, I’d argue that a positive is it clearly outlines which props are being used in each method.

In addition, you won’t have to worry about side effects such as accidentally changing a variable reference. This method keeps your methods separate and clean, which can be a huge advantage for other operations during your projects such as debugging or writing tests.

Thanks for reading! If this helped you, please clap and/or share this article so it can help others too! :)