Een kort overzicht van ES6 voor React native ontwikkelaars

Als je naar React Native komt en je bent

  1. Nieuw bij JavaScript
  2. Al bekend met JavaScript maar de functies ES6 / ES2015 + nog niet gebruikt

dan voel je je soms een beetje verloren. De syntaxis kan raar, verwarrend lijken, of soms weet je gewoon niet wat je moet zoeken. Ik heb een korte lijst samengesteld van de meest voorkomende ES6 + -functies die ik zie in React Native-apps en tutorials. Dit is geenszins uitgebreid, maar het zou op zijn minst je op weg moeten helpen.

Variabelen

Sinds de komst van JavaScript hebben we var. Maar nu hebben we var, let en const. Ze zijn allemaal geldig, maar wat is het verschil?

let: Zeer vergelijkbaar met var, maar de scoping is anders. var is function scoped (beschikbaar en kan overal binnen een functie worden gewijzigd) terwijl let block scoped is, wat betekent dat het alleen binnen dat codeblok beschikbaar is. Ik gebruik vrijwel altijd let in plaats van var (eerlijk gezegd kan ik me de laatste keer dat ik var gebruikte niet herinneren).

const: Zelfde scoping (blok) als laten, maar u kunt de waarde ervan niet wijzigen, bijvoorbeeld:

const name = 'Spencer';
name = 'Johnny' // Kan dit niet

Echter (en dit is iets waar ik in het begin over in de war was), kunt u het wijzigen als het een type object of array is, bijvoorbeeld:

const info = {
  naam: 'Spencer',
  bedrijf: 'Handlebar Labs',
};
info.job = 'Lesgeven'; // Dit is volkomen geldig
const rollen = ['Student', 'Teacher'];
roles.push ( 'Developer'); // Klaar om te vertrekken!

Wil je meer info?

  • laat
  • const

Pijl functies

Syntaxis

Er is nu een nieuwe manier om functies in JavaScript te declareren die pijlfuncties worden genoemd, en u zult deze veel zien wanneer u met React of React Native werkt. Het primaire verschil tussen standaard / oude functies en pijlfuncties is waar dit aan gebonden is, dus soms wilt / moet u de functie gebruiken. Een pijlfunctie maken is eenvoudig

const greet = (name) => {
  retourneer 'Hallo' + naam + '!';
};
groeten (Spencer); // Hallo, Spencer!

Meer informatie over de syntaxis van de pijlfunctie

Argumenten opmaken

Met pijlfuncties kunt u pijlfuncties op een aantal verschillende manieren opmaken, die allemaal vaak worden gebruikt. Dit zijn de drie regels die ik heb vastgelegd in mijn geheugen.

1. Geen argumenten = haakjes vereist

const greet = () => {
  terug 'Hallo!';
};

2. Eén argument = haakjes optioneel

const greet = (name) => {
  retourneer 'Hallo' + naam + '!';
};
const greet = name => {
  retourneer 'Hallo' + naam + '!';
};

3. Twee of meer argumenten = haakjes vereist

const greet = (naam, bedrijf) => {
  retourneer 'Hallo' + naam + '!' + 'Hoe is' + bedrijf + '?';
};

Meer informatie over opmaakargumenten

Standaard argumenten

Dit is een van mijn favorieten - een uiterst eenvoudige manier om standaardargumenten voor uw functies in te stellen door ze eenvoudigweg aan een waarde toe te wijzen bij het benoemen van het argument. Als het argument wordt doorgegeven, gebruikt het het argument dat u doorgeeft, anders wordt het teruggezet op de standaardwaarde.

const greet = (name = 'Friend') => {
  retourneer 'Hallo' + naam + '!';
};
begroeten(); // Hallo vriend!
groeten (Spencer); // Hallo, Spencer!

Meer informatie over standaardargumenten

Impliciete terugkeer

Heb je een eenvoudige functie en ben je het beu om accolades te schrijven? Geen zorgen meer! U kunt nu impliciet terugkeren van een functie, zoals deze

const greet = (name) => 'Hallo' + naam + '!';
groeten (Spencer); // Hallo, Spencer!

Mmm opgeslagen toetsaanslagen

Het wordt echter beter! Stel dat u een object uit een functie wilt retourneren, u kunt dit zo doen (u zult dit vaak zien wanneer u met Redux werkt)

const getInfo = () => ({
  naam: 'Spencer',
  bedrijf: 'Handlebar Labs',
  functie: 'lesgeven',
});
informatie verkrijgen(); // {name: 'Spencer', bedrijf: 'Handlebar Labs', functie: 'Teaching'}

(let op de haakjes die het object omwikkelen)

En ten slotte kun je een component ook op dezelfde manier retourneren als het object, laat me het demonstreren

const Greeting = ({name}) => (
  
     Hallo, {naam}! 
  
);

Nogmaals, we verpakken het onderdeel tussen haakjes en we hoeven geen retouren te doen.

Meer informatie over impliciete retourzendingen

Voorwerpen

We hebben nu een paar zeer handige tools (die voorheen een externe bibliotheek nodig hadden) die het werken met objecten in JavaScript eenvoudiger maken.

destructurering

Met destructurering kunnen we een object 'vernietigen' of afbreken, zodat we gemakkelijker toegang hebben tot de informatie waar we om geven. Stel dat we toegang willen hebben tot bepaalde gegevens over een object, in het verleden hadden we het volgende moeten doen

const info = {
  naam: 'Spencer',
  bedrijf: 'Handlebar Labs',
  plaats: {
    stad: 'Nashville',
    staat: 'Tennessee',
  },
};
const name = info.name;
const city = info.location.city;
const state = info.location.state;

Dat is prima, maar nu kunnen we een beetje tijd besparen door de variabelen te definiëren die toegang hebben tot de informatie waar we om geven. Wanneer je rekwisieten rond een React Native-applicatie doorgeeft, is het gebruikelijk om een ​​aantal geneste gegevens te hebben en, zoals we zien met de stad en de staat, schrijven we uiteindelijk veel van dezelfde code. U kunt dat object vernietigen om gemakkelijker toegang te krijgen tot gegevens.

const info = {
  naam: 'Spencer',
  bedrijf: 'Handlebar Labs',
  plaats: {
    stad: 'Nashville',
    staat: 'Tennessee',
  },
};
const {name, location} = info;
const {city, state} = locatie;
// naam is Spencer
// stad is Nashville
// staat is Tennessee

Je zult dit vaak zien wanneer je informatie van rekwisieten opent, zoals deze:

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

Meer informatie over objectvernietiging

Verspreiding

Met objectspreiding kunnen we informatie van het ene object naar het andere kopiëren. Het is een praktijk die je vaak zult zien bij het gebruik van Redux vanwege de behoefte aan pure functies. Stel dat we meerdere mensen hebben die bij Handlebar Labs werken en dat ze allemaal dezelfde basisinformatie hebben. Om tijd te besparen, kopiëren we die informatie van de 'sjabloon' naar de informatie van een persoon.

const handlebarLabsInfo = {
  bedrijf: 'Handlebar Labs',
  plaats: {
    stad: 'Nashville',
    staat: 'Tennessee',
  },
};
const spencerInfo = {
  ... handlebarLabsInfo,
  naam: 'Spencer',
}
console.log (spencerInfo); // {name: 'Spencer', bedrijf: 'Handlebar Labs', locatie: {city: 'Nashville', staat: 'Tennessee'}}

Meer informatie over objectspreiding

strings

Template Literals

Nog een persoonlijke favoriet van mij. Merk op hoe eerder, of in een van uw oudere code / tutorials, u 'Hallo' + naam + 'ziet!' + 'Hoe is' + bedrijf + '?'? Die + tekens kunnen lastig zijn om te schrijven en ik weet persoonlijk dat ik altijd een spatie zou vergeten, waardoor de opmaak eruitziet. Sjabloonliterals maken het ons gemakkelijker omdat we veel natuurlijker tekenreeksen kunnen schrijven met dynamische inhoud.

Door back-ticks (``) te gebruiken om de string te definiëren, kunnen we vervolgens variabelen doorgeven met $ {}. Laat me je gewoon laten zien ...

const greet = (naam, bedrijf) => {
  // terug 'Hallo' + naam + '!' + 'Hoe is' + bedrijf + '?';
  terug `Hallo, $ {name}! Hoe is het met $ {company}? `;
};

Zoveel beter

Meer informatie over sjabloonliteralen

modules

Voor mensen die eerst naar React Native springen, kan dit verwarrend zijn. Je bent waarschijnlijk gewend om te zien

exports.greet = (name) => 'Hallo' + naam + '!';
// OF
module.exports = (name) => 'Hallo' + naam + '!';

en om die code ook daadwerkelijk te gebruiken:

const formaliteiten = vereisen ('./ formaliteiten');
formalities.greet ();
const greet = vereisen ('./ formaliteiten');
begroeten();

We hebben nu toegang tot een andere modulesyntaxis die gebruikmaakt van de zoekwoorden die worden geïmporteerd en geëxporteerd. Laten we dat eerste exportblok converteren.

export const greet = (name) => 'Hallo' + naam + '!';
// OF
standaardgroet exporteren;

Vervolgens kunnen we toegang krijgen tot die code

import {greet} uit './formalities';
// OF
import begroet van './formalities';

Het leuke is dat we zowel standaard exporteren als standaard exporteren kunnen gebruiken. Er is veel meer dat u kunt doen met ES6-modules en ik zou u zeker aanmoedigen om het te bekijken. vereist heeft nog steeds zijn plaats, maar ik gebruik ze nu zelden

  • Meer informatie over importeren
  • Meer informatie over exporteren

Afsluiten

Er zijn veel geweldige dingen in ES6 en verder, veel daarvan heb ik hier niet behandeld. Dit zijn slechts de meest voorkomende die ik in gebruik zie. Ben ik iets vergeten? Laat het me weten!

Wilt u meer Reageren Native gerelateerde inhoud? Meld je aan voor mijn e-maillijst of volg mijn introductie tot React Native cursus (het is gratis!).