Una breve panoramica di ES6 per sviluppatori nativi React

Se verrai a React Native e lo sei

  1. Nuovo su JavaScript
  2. Conosce già JavaScript ma non ha utilizzato le funzionalità ES6 / ES2015 +

allora potresti sentirti un po 'perso a volte. La sintassi può sembrare strana, confusa o talvolta non sai cosa cercare. Ho compilato un breve elenco delle funzionalità ES6 + più comuni che vedo nelle app e nei tutorial di React Native. Questo non è affatto completo ma dovrebbe almeno iniziare.

variabili

Dall'avvento di JavaScript abbiamo avuto var. Ma ora abbiamo var, let e const. Sono tutti validi ma qual è la differenza?

let: molto simile a var ma lo scoping è diverso. var è nell'ambito della funzione (disponibile e può essere modificato ovunque all'interno di una funzione) mentre let ha l'ambito del blocco, il che significa che è disponibile solo all'interno di quel blocco di codice. Praticamente uso sempre let al posto di var ora (onestamente non ricordo l'ultima volta che ho usato var).

const: stesso ambito (blocco) di let ma non è possibile modificarne il valore, ad esempio:

const name = 'Spencer';
name = 'Johnny' // Non posso farlo

Tuttavia (e questo è qualcosa di cui ero confuso all'inizio) puoi modificarlo se si tratta di un oggetto o un array di tipo, ad esempio:

const info = {
  nome: "Spencer",
  società: "Handlebar Labs",
};
info.job = 'Insegnamento'; // Questo è perfettamente valido
const ruoli = ['Studente', 'Insegnante'];
roles.push ( 'Developer'); // Buono a partire!

Vuoi maggiori informazioni?

  • permettere
  • const

Funzioni freccia

Sintassi

Ora c'è un nuovo modo per dichiarare funzioni in JavaScript chiamate funzioni freccia e le vedrai molto quando lavori con React o React Native. La differenza principale tra le funzioni standard / vecchie e le funzioni freccia è ciò a cui è legato, quindi a volte vorrai / dovrai usare la funzione. La creazione di una funzione freccia è semplice

const greet = (name) => {
  ritorna "Ciao", + nome + "!";
};
greet ( 'Spencer'); // Ciao Spencer!

Ulteriori informazioni sulla sintassi della funzione freccia

Argomenti di formattazione

Con le funzioni freccia è possibile formattare le funzioni freccia in diversi modi, tutti comunemente utilizzati. Queste sono le tre regole che ho commesso in memoria.

1. Nessun argomento = parentesi richiesta

const greet = () => {
  ritorna "Ciao!";
};

2. Un argomento = parentesi facoltativa

const greet = (name) => {
  ritorna "Ciao", + nome + "!";
};
const greet = name => {
  ritorna "Ciao", + nome + "!";
};

3. Due o più argomenti = parentesi richiesta

const greet = (nome, azienda) => {
  ritorna "Ciao", + nome + "!" + 'Come è' + company + '?';
};

Ulteriori informazioni sulla formattazione degli argomenti

Argomenti predefiniti

Questo è uno dei miei preferiti - un modo estremamente semplice per impostare argomenti predefiniti per le tue funzioni semplicemente assegnandoli a un valore quando si nomina l'argomento. Se l'argomento viene passato, utilizzerà l'argomento passato, altrimenti tornerà al valore predefinito.

const greet = (name = 'Friend') => {
  ritorna "Ciao", + nome + "!";
};
salutare(); // Ciao amico!
greet ( 'Spencer'); // Ciao Spencer!

Ulteriori informazioni sugli argomenti predefiniti

Ritorno implicito

Hai una funzione semplice e stufo di scrivere parentesi graffe e ritorni? Non preoccuparti più! Ora puoi tornare implicitamente da una funzione, in questo modo

const greet = (name) => 'Hello,' + name + '!';
greet ( 'Spencer'); // Ciao Spencer!

Mmm ha salvato i tasti

Ma va meglio! Supponiamo che tu voglia restituire un oggetto da una funzione, puoi farlo in questo modo (lo vedrai spesso quando lavori con Redux)

const getInfo = () => ({
  nome: "Spencer",
  società: "Handlebar Labs",
  lavoro: "Insegnamento",
});
ottenere informazioni(); // {nome: 'Spencer', azienda: 'Handlebar Labs', lavoro: 'Insegnamento'}

(nota la parentesi che avvolge l'oggetto)

E finalmente sei anche in grado di restituire un componente in un modo molto simile all'oggetto, fammi dimostrare

const Saluto = ({name}) => (
  
     Ciao, {nome}! 
  
);

Ancora una volta stiamo avvolgendo il componente tra parentesi e non dobbiamo effettuare alcun reso.

Ulteriori informazioni sui rendimenti impliciti

Oggetti

Ora abbiamo alcuni strumenti molto convenienti (che in precedenza avrebbero richiesto una libreria esterna) che semplificano il lavoro con gli oggetti in JavaScript.

destrutturazione

La destrutturazione ci consente di "destrutturare" o scomporre un oggetto in modo da poter accedere più facilmente alle informazioni a cui teniamo. Diciamo che vogliamo accedere ad alcuni dati su un oggetto, in passato avremmo dovuto fare quanto segue

const info = {
  nome: "Spencer",
  società: "Handlebar Labs",
  Posizione: {
    città: 'Nashville',
    stato: "Tennessee",
  },
};
const name = info.name;
const city = info.location.city;
const state = info.location.state;

Va bene, ma ora siamo in grado di risparmiare un po 'di tempo definendo le variabili che accedono alle informazioni a cui teniamo. Quando passi oggetti di scena intorno a un'applicazione React Native è comune avere alcuni dati nidificati e, come vediamo con la città e lo stato, finiamo per scrivere molto dello stesso codice. Sei in grado di destrutturare quell'oggetto per accedere più facilmente ai dati.

const info = {
  nome: "Spencer",
  società: "Handlebar Labs",
  Posizione: {
    città: 'Nashville',
    stato: "Tennessee",
  },
};
const {nome, posizione} = info;
const {città, stato} = posizione;
// il nome è Spencer
// la città è Nashville
// state è Tennessee

Lo vedrai spesso quando accedi alle informazioni dagli oggetti di scena, come questo:

const Info = ({name, location}) => (
  
     {nome} risiede in {location.city}, {location.state} 
  
);

Ulteriori informazioni sulla distruzione degli oggetti

Diffusione

La diffusione degli oggetti ci consente di copiare informazioni da un oggetto a un altro. È una pratica che vedrai spesso quando usi Redux a causa della necessità di funzioni pure. Supponiamo di avere più persone che lavorano presso Handlebar Labs e hanno tutte le stesse informazioni di base. Per risparmiare tempo, copieremo tali informazioni dal "modello" alle informazioni di una persona.

const handlebarLabsInfo = {
  società: "Handlebar Labs",
  Posizione: {
    città: 'Nashville',
    stato: "Tennessee",
  },
};
const spencerInfo = {
  ... handlebarLabsInfo,
  nome: "Spencer",
}
console.log (spencerInfo); // {nome: 'Spencer', azienda: 'Handlebar Labs', posizione: {città: 'Nashville', stato: 'Tennessee'}}

Ulteriori informazioni sulla diffusione degli oggetti

stringhe

Letterali modello

Un altro dei miei preferiti personali. Nota come in precedenza, o in uno dei tuoi vecchi codici / tutorial, vedi "Ciao," + nome + "!" + 'Come è' + company + '?'? Quei segni + possono essere una seccatura da scrivere e so personalmente che dimenticherò sempre uno spazio, facendo apparire la formattazione. I letterali template ci semplificano perché possiamo scrivere in modo molto più naturale stringhe con contenuti dinamici.

Usando back tick (``) per definire la stringa possiamo quindi passare le variabili con $ {}. Lascia che ti mostri ...

const greet = (nome, azienda) => {
  // restituisce "Ciao", + nome + "!" + 'Come è' + company + '?';
  return `Ciao, $ {name}! Come sta $ {company}? `;
};

Molto meglio

Ulteriori informazioni sui letterali dei modelli

moduli

Per le persone che saltano per la prima volta su React Native, questo può creare confusione. Probabilmente sei abituato a vedere

exports.greet = (nome) => 'Ciao,' + nome + '!';
// O
module.exports = (name) => 'Hello,' + name + '!';

e allo stesso modo per usare effettivamente quel codice:

const formalities = request ('./ formalities');
formalities.greet ();
const greet = request ('./ formalities');
salutare();

Ora abbiamo accesso a una diversa sintassi del modulo che sfrutta le parole chiave import ed export. Convertiamo quel primo blocco di esportazione.

export const greet = (name) => 'Ciao,' + nome + '!';
// O
esportazione predefinita saluto;

Quindi per accedere a quel codice potremmo usare

importare {greet} da './formalità';
// O
importazione saluto da './formalità';

La cosa bella è che possiamo usare insieme sia l'esportazione che l'esportazione di default. C'è molto di più che puoi fare con i moduli ES6 e ti incoraggio a dare un'occhiata. requisito ha ancora il suo posto, ma ora li uso raramente

  • Ulteriori informazioni sull'importazione
  • Ulteriori informazioni sull'esportazione

Avvolgendo

Ci sono molte cose fantastiche in ES6 e oltre, molte delle quali non ho trattato qui. Questi sono solo i più comuni che vedo in uso. Ho dimenticato qualcosa? Fammi sapere!

Desideri altri contenuti correlati a React Native? Iscriviti alla mia mailing list o porta la mia introduzione al corso React Native (è gratuito!).