Et kort overblik over ES6 for reaktive indfødte udviklere

Hvis du kommer til React Native, og du er

  1. Ny på JavaScript
  2. Har allerede kendt JavaScript, men har ikke brugt ES6 / ES2015 + -funktioner

så kan du til tider føle dig lidt tabt. Syntaxen kan virke underlig, forvirrende, eller du ved nogle gange bare ikke, hvad du skal kigge efter. Jeg har samlet en kort liste over de mest almindelige ES6 + -funktioner, som jeg ser i React Native apps og tutorials. Dette er på ingen måde omfattende, men det skal i det mindste komme i gang.

Variable

Siden fremkomsten af ​​JavaScript har vi haft var. Men nu har vi var, lad og konst. De er alle gyldige, men hvad er forskellen?

lad: Meget ligner var, men scoping er anderledes. var er funktions scoped (tilgængelig og kan ændres hvor som helst inden for en funktion), hvorimod let er blok scoped, hvilket betyder, at det kun er tilgængeligt inden for denne blok af kode. Jeg bruger stort set altid lade i stedet for var nu (ærligt kan jeg ikke huske sidste gang jeg brugte var).

const: Samme scoping (blok) som lad, men du kan ikke ændre værdien af ​​den, for eksempel:

const name = 'Spencer';
name = 'Johnny' // Kan ikke gøre dette

Dog (og det var noget, som jeg var forvirret med først) kan du ændre det, hvis det er af et type objekt eller array, for eksempel:

const info = {
  navn: 'Spencer',
  virksomhed: 'Styrbar Labs'
};
info.job = 'Undervisning'; // Dette er perfekt gyldigt
const roller = ['Student', 'Teacher'];
roles.push ( 'Udvikler'); // Klar!

Vil du have mere info?

  • lade
  • konst

Pilefunktioner

Syntaks

Der er nu en ny måde at erklære funktioner i JavaScript kaldet pilefunktioner, og du kan se disse meget, når du arbejder med React eller React Native. Den primære forskel mellem standard / gamle funktioner og pilefunktioner er, hvad dette er bundet til, så sommetider ønsker du / har brug for at bruge funktion. Oprettelse af en pilefunktion er enkel

const greet = (navn) => {
  returner 'Hej,' + navn + '!';
};
hilse (Spencer '); // Hej Spencer!

Lær mere om syntaks af pilefunktioner

Formatering af argumenter

Med pilefunktioner kan du formatere pilefunktioner på et par forskellige måder, som alle er almindeligt anvendte. Dette er de tre regler, jeg har overdraget til hukommelsen.

1. Ingen argumenter = parentes kræves

const greet = () => {
  vende tilbage 'Hej!';
};

2. Ét argument = parentes valgfrit

const greet = (navn) => {
  returner 'Hej,' + navn + '!';
};
const greet = name => {
  returner 'Hej,' + navn + '!';
};

3. To eller flere argumenter = krævet parentes

const greet = (navn, firma) => {
  returner 'Hej,' + navn + '!' + 'Hvordan er' + firma + '?';
};

Lær mere om formatering af argumenter

Standard argumenter

Dette er en af ​​mine favoritter - en ekstremt enkel måde at indstille standardargumenter til dine funktioner ved blot at tildele dem til en værdi, når man navngiver argumentet. Hvis argumentet sendes, bruger det argumentet, du sender, ellers falder det tilbage til standardindstillingen.

const greet = (name = 'Friend') => {
  returner 'Hej,' + navn + '!';
};
hilse(); // Hej ven!
hilse (Spencer '); // Hej Spencer!

Lær mere om standardargumenter

Implicit returnering

Har du en simpel funktion og er træt af at skrive krøllede seler og vender tilbage? Fret ikke mere! Du er nu i stand til implicit at vende tilbage fra en funktion som sådan

const greet = (name) => 'Hej,' + navn + '!';
hilse (Spencer '); // Hej Spencer!

Mmm gemte tastetryk

Det bliver dog bedre! Lad os sige, at du vil returnere et objekt fra en funktion, kan du gøre det sådan (du vil ofte se dette, når du arbejder med Redux)

const getInfo = () => ({
  navn: 'Spencer',
  virksomhed: 'Styrbar Labs'
  job: 'Undervisning',
});
få information(); // {navn: 'Spencer', firma: 'Handlebar Labs', job: 'Teaching'}

(læg mærke til parentesen, der ombryder objektet)

Og endelig er du også i stand til at returnere en komponent på en meget lignende måde som objektet, lad mig demonstrere

const Hilsen = ({navn}) => (
  
     Hej, {name}! 
  
);

Igen indpakker vi komponenten med parentes, og vi behøver ikke returnere.

Lær mere om implicit returnering

objekter

Vi har nu fået et par meget praktiske værktøjer (som tidligere ville have krævet et eksternt bibliotek), der gør det lettere at arbejde med objekter i JavaScript.

nedbrydningen

Destrukturering giver os mulighed for at ”ødelægge” eller nedbryde et objekt, så vi lettere kan få adgang til de oplysninger, vi holder af. Lad os sige, at vi vil have adgang til nogle data om et objekt, i fortiden ville vi have været nødt til at gøre følgende

const info = {
  navn: 'Spencer',
  virksomhed: 'Styrbar Labs'
  Beliggenhed: {
    by: 'Nashville',
    stat: 'Tennessee',
  },
};
const name = info.name;
const city = info.location.city;
const state = info.location.state;

Det er fint, men nu er vi i stand til at spare lidt tid på at definere de variabler, der får adgang til den information, vi er interesseret i. Når du videresender rekvisitter omkring en React Native-applikation, er det almindeligt at have nogle indlejrede data, og som vi ser med by og stat, ender vi med at skrive en masse af den samme kode. Du er i stand til at ødelægge dette objekt for lettere at få adgang til data.

const info = {
  navn: 'Spencer',
  virksomhed: 'Styrbar Labs'
  Beliggenhed: {
    by: 'Nashville',
    stat: 'Tennessee',
  },
};
const {name, location} = info;
const {city, state} = placering;
// navn er Spencer
// byen er Nashville
// staten er Tennessee

Dette ser du ofte, når du får adgang til oplysninger fra rekvisitter, som dette:

const Info = ({navn, placering}) => (
  
     {name} bor i {location.city}, {location.state} 
  
);

Lær mere om obstruktion af genstande

Sprede

Objektspredning giver os mulighed for at kopiere oplysninger fra et objekt til et andet. Det er en praksis, du ofte ser, når du bruger Redux på grund af behovet for rene funktioner. Lad os sige, at vi har flere personer, der arbejder på Handlebar Labs, og de har alle nogle af de samme grundlæggende oplysninger. For at spare tid kopierer vi disse oplysninger fra “skabelonen” til den enkeltes oplysninger.

const handlebarLabsInfo = {
  virksomhed: 'Styrbar Labs'
  Beliggenhed: {
    by: 'Nashville',
    stat: 'Tennessee',
  },
};
const spencerInfo = {
  ... handlebarLabsInfo,
  navn: 'Spencer',
}
console.log (spencerInfo); // {navn: 'Spencer', firma: 'Handlebar Labs', placering: {by: 'Nashville', stat: 'Tennessee'}}

Lær mere om spredning af genstande

Strenge

Skabelon bogstaver

En anden personlig favorit af mig. Bemærk, hvordan du tidligere eller i en af ​​dine ældre kode / tutorials ser 'Hej,' + navn + '!' + 'Hvordan er' + firma + '?'? Disse + tegn kan være smertefulde at skrive, og jeg ved personligt, at jeg altid vil glemme et mellemrum, hvilket får formateringen til at se ud. Skabelonlitterære gør det lettere for os, fordi vi meget mere naturligt kan skrive strenge med dynamisk indhold.

Ved at bruge rygmærker (``) til at definere strengen kan vi derefter videregive variabler med $ {}. Lad mig bare vise dig ...

const greet = (navn, firma) => {
  // return 'Hej,' + navn + '!' + 'Hvordan er' + firma + '?';
  returner 'Hej, $ {navn}! Hvordan er $ {firma}? `;
};

Så meget bedre

Lær mere om skabelon bogstaver

moduler

For folk, der først hopper over til React Native, kan dette være forvirrende. Du er sandsynligvis vant til at se

eksport.greet = (name) => 'Hej,' + navn + '!';
// ELLER
module.exports = (name) => 'Hej,' + navn + '!';

og ligeledes faktisk bruge denne kode:

const formaliteter = kræve ('./ formaliteter');
formalities.greet ();
const greet = kræve ('./ formaliteter);
hilse();

Vi har nu adgang til et andet modulsyntaks, der drager fordel af nøgleordene import og eksport. Lad os konvertere den første eksportblok.

eksport const greet = (name) => 'Hej,' + navn + '!';
// ELLER
eksport standardhilsen;

Derefter for at få adgang til den kode, vi kunne bruge

import {greet} fra './formalities';
// ELLER
importhilsen fra './formaliteter';

Det, der er rart, er, at vi kan bruge både eksport og eksport standard sammen. Der er meget mere, du kan gøre med ES6-moduler, og jeg vil bestemt opfordre dig til at tjekke det ud. kræver har stadig sin plads, men jeg bruger sjældent dem nu

  • Lær mere om import
  • Lær mere om eksport

Afslutter

Der er mange gode ting i ES6 og videre, meget af det dækkede jeg ikke her. Dette er bare de mest almindelige, som jeg ser i brug. Glemte jeg noget? Lad mig vide!

Vil du have mere reageret indbygget relateret indhold? Tilmeld mig min e-mail-liste, eller tag min introduktion til React Native kursus (det er gratis!).