Lyhyt esittely ES6: sta reaaliaikaisille alkuperäiskehittäjille

Jos olet tulossa React Native -sivulle ja olet

  1. Uusi JavaScript
  2. Tunnet jo JavaScriptin, mutta et ole vielä käyttänyt ES6 / ES2015 + -ominaisuuksia

silloin saatat tuntea olevansa kadonnut ajoittain. Syntaksi voi tuntua oudolta, hämmentävältä tai joskus et vain tiedä mitä etsiä. Olen koonnut lyhyen luettelon yleisimmistä ES6 + -ominaisuuksista, joita näen React Native -sovelluksissa ja oppaissa. Tämä ei suinkaan ole kattava, mutta sen pitäisi ainakin päästä alkuun.

muuttujat

JavaScriptin tulon jälkeen meillä on ollut var. Mutta nyt meillä on var, let ja const. Ne ovat kaikki kelvollisia, mutta mikä ero on?

anna: Hyvin samanlainen kuin var, mutta laajuus on erilainen. var on funktion laajuus (saatavana ja sitä voidaan muokata missä tahansa funktion sisällä), kun taas let on lohkon laajuus, tarkoittaen, että se on saatavana vain kyseisessä koodilohkossa. Käytän melkein aina var-aseiden korvaamista nyt (rehellisesti, en muista viimeksi käyttämääni var-versiota).

const: Sama laajuus (estää) kuin anna, mutta et voi muuttaa sen arvoa, esimerkiksi:

const nimi = 'Spencer';
name = 'Johnny' // Tätä ei voi tehdä

(Ja tästä olen aluksi hämmentynyt), voit kuitenkin muokata sitä, jos kyseessä on tyyppiobjekti tai taulukko, esimerkiksi:

const info = {
  nimi: 'Spencer',
  yritys: 'Handlebar Labs',
};
info.job = 'Opetus'; // Tämä on täysin pätevä
const rolls = ['Opiskelija', 'Opettaja'];
roles.push ( 'Developer'); // Hyvä mennä!

Haluatko lisätietoja?

  • päästää
  • const

Nuolitoiminnot

Syntaksi

Nyt on uusi tapa julistaa JavaScript-toiminnot, joita kutsutaan nuolifunktioiksi. Näet niitä paljon työskennellessäsi Reaktin tai Reaktin alkuperäisen kanssa. Ensisijainen ero vakio / vanhojen ja nuolitoimintojen välillä on se, mihin tämä on sidottu, joten joskus haluat / on käytettävä toimintoa. Nuolitoiminnon luominen on yksinkertaista

const greet = (nimi) => {
  palauta 'Hei' + nimi + '!';
};
tervehtiä (Spencer); // Hei, Spencer!

Lisätietoja nuolitoimintojen syntaksista

Argumenttien muotoilu

Nuolitoiminnoilla voit muotoilla nuolitoiminnot muutamalla eri tavalla, jotka kaikki ovat yleisesti käytettyjä. Nämä ovat kolme sääntöä, jotka olen sitoutunut muistamaan.

1. Ei argumentteja = sulkuja ei tarvita

const greet = () => {
  palauta 'Hei!';
};

2. Yksi argumentti = suluissa valinnainen

const greet = (nimi) => {
  palauta 'Hei' + nimi + '!';
};
const greet = nimi => {
  palauta 'Hei' + nimi + '!';
};

3. Kaksi tai useampia argumentteja = tarvitaan sulu

const greet = (nimi, yritys) => {
  palauta 'Hei' + nimi + '!' + 'Kuinka' + yritys + 'on?';
};

Lisätietoja argumenttien muotoilusta

Oletusargumentit

Tämä on yksi suosikeistani - erittäin yksinkertainen tapa asettaa oletusargumentit toiminnoillesi vain määrittämällä ne arvoon nimeämällä argumentti. Jos argumentti hyväksytään, se käyttää välittämääsi argumenttia, muuten se palaa oletusarvoon.

const greet = (nimi = 'Ystävä') => {
  palauta 'Hei' + nimi + '!';
};
tervehtiä(); // Hei ystävä!
tervehtiä (Spencer); // Hei, Spencer!

Lisätietoja oletusargumenteista

Implisiittinen paluu

Onko sinulla yksinkertainen tehtävä ja kyllästynyt kirjoittamaan kiharanauhoja ja palautuksia? Fret enää! Voit nyt palata epäsuorasti esimerkiksi toiminnasta

const greet = (nimi) => 'Hei,' + nimi + '!';
tervehtiä (Spencer); // Hei, Spencer!

Mmm tallensi näppäinpainallukset

Se paranee kuitenkin! Sano esimerkiksi, että haluat palauttaa objektin toiminnosta, voit tehdä niin (näet tämän usein Reduxin kanssa työskennellessä)

const getInfo = () => ({
  nimi: 'Spencer',
  yritys: 'Handlebar Labs',
  työpaikka: 'Opetus',
});
saada tietoa(); // {nimi: 'Spencer', yritys: 'Handlebar Labs', työpaikka: 'Teaching'}

(huomaa objektin kääriminen suluissa)

Ja lopuksi pystyt myös palauttamaan komponentin hyvin samalla tavalla kuin esine, anna minun esitellä

const Tervehdys = ({nimi}) => (
  
     Hei, {nimi}! 
  
);

Kääritämme jälleen komponentin sulkuilla, eikä meidän tarvitse tehdä palautuksia.

Lisätietoja implisiittisistä palautuksista

esineet

Meillä on nyt muutamia erittäin käteviä työkaluja (jotka aiemmin olisi vaatinut ulkoista kirjastoa), jotka helpottavat JavaScriptin objektien kanssa työskentelyä.

destrukturointiainetta

Suunnittelun avulla voimme objektin ”rakentaa” tai hajottaa, jotta pääsemme helpommin välittämämme tietoihin. Oletetaan, että haluamme käyttää joitain objektin tietoja, aiemmin meidän olisi pitänyt tehdä seuraava

const info = {
  nimi: 'Spencer',
  yritys: 'Handlebar Labs',
  sijainti: {
    kaupunki: 'Nashville',
    osavaltio: 'Tennessee',
  },
};
const nimi = info.name;
const kaupunki = info.sijainti.kaupunki;
const tila = info.location.state;

Se on hieno, mutta nyt pystymme säästämään vähän aikaa määrittelemällä muuttujat, jotka käyttävät välittämäämme tietoa. Kun siirrät rekvisiitta React Native -sovelluksen ympärille, on tavallista, että meillä on sisäkkäisiä tietoja, ja kuten näemme kaupunkien ja osavaltioiden kanssa, kirjoitamme lopulta paljon samaa koodia. Voit hajottaa kyseisen objektin tietojen helpompaa käyttöä varten.

const info = {
  nimi: 'Spencer',
  yritys: 'Handlebar Labs',
  sijainti: {
    kaupunki: 'Nashville',
    osavaltio: 'Tennessee',
  },
};
const {nimi, sijainti} = info;
const {kaupunki, osavaltio} = sijainti;
// nimi on Spencer
// kaupunki on Nashville
// osavaltio on Tennessee

Näet tämän usein, kun käytät tietoja rekvisiitta, kuten tämä:

const Info = ({nimi, sijainti}) => (
  
     {nimi} asuu {location.city}, {location.state} 
  
);

Lisätietoja esineiden tuhoamisesta

Levitä

Objektien leviäminen antaa meille mahdollisuuden kopioida tietoja objektista toiseen. Se on käytäntö, jonka usein käytät Reduxia käytettäessä, koska tarvitaan puhtaita toimintoja. Oletetaan, että meillä on useita ihmisiä, jotka työskentelevät Handlebar Labsissa, ja heillä kaikilla on samat perustiedot. Ajan säästämiseksi kopioimme nämä tiedot mallipohjasta yksilön tietoihin.

const handlebarLabsInfo = {
  yritys: 'Handlebar Labs',
  sijainti: {
    kaupunki: 'Nashville',
    osavaltio: 'Tennessee',
  },
};
const spencerInfo = {
  ... handlebarLabsInfo,
  nimi: 'Spencer',
}
console.log (spencerInfo); // {nimi: 'Spencer', yritys: 'Handlebar Labs', sijainti: {kaupunki: 'Nashville', osavaltio: 'Tennessee'}}

Lisätietoja objektien leviämisestä

jouset

Mallikirjaimet

Toinen henkilökohtainen suosikki. Huomaa, kuinka aikaisemmin tai missä tahansa vanhemmassa koodissa / oppaissa näet 'Hei' + nimi + '!' + 'Kuinka' + yritys + 'on? Nämä + merkit voivat olla tuskallinen kirjoittamisessa, ja tiedän henkilökohtaisesti, että unohdan aina välilyönnin, mikä muotoilun aiheuttaisi loppumista. Mallimerkit helpottavat meitä, koska voimme luonnollisemmin kirjoittaa dynaamisen sisällön jouset.

Käyttämällä takamerkkejä (``) merkkijonon määrittelemiseen, voimme sitten siirtää muuttujat $ {}: lla. Annan vain näyttää sinulle ...

const greet = (nimi, yritys) => {
  // palauta 'Hei' + nimi + '!' + 'Kuinka' + yritys + 'on?';
  palauta `Hei, $ {nimi}! Kuinka $ {yritys} on?
};

Niin paljon parempi

Lisätietoja mallikirjaimista

moduulit

Tämä voi olla hämmentävä ihmisille, jotka hyppäävät ensimmäisen kerran React Native -tapahtumaan. Olet todennäköisesti tottunut näkemään

export.greet = (nimi) => 'Hei,' + nimi + '!';
// TAI
module.exports = (nimi) => 'Hei,' + nimi + '!';

ja samaan tapaan käyttää tätä koodia:

muodollisuudet = vaaditaan ('./ muodollisuudet');
formalities.greet ();
const greet = vaadi ('./ muodollisuudet');
tervehtiä();

Olemme nyt saaneet pääsyn erilaiseen moduulin syntaksiin, joka hyödyntää avainsanojen tuontia ja vientiä. Muunnetaan se ensimmäinen vientilohko.

vie const greet = (nimi) => 'Hei,' + nimi + '!';
// TAI
vie oletustervehdys;

Sitten pääsemme koodiin, jota voisimme käyttää

tuo {tervehdys} './muodollisuuksista';
// TAI
tuo tervehdys './muodollisuuksista';

Hienoa on, että voimme käyttää sekä vientiä että vientiä oletusarvoina yhdessä. ES6-moduuleilla voi tehdä paljon enemmän ja rohkaisin sinua ehdottomasti tarkistamaan se. vaatii, on edelleen paikkansa, mutta käytän niitä nyt harvoin

  • Lisätietoja tuonnista
  • Lisätietoja viennistä

Käärimistä

ES6: ssa ja sen ulkopuolella on paljon hienoja juttuja, suurta osaa siitä en peittänyt täällä. Nämä ovat vain yleisimpiä, joita näen käytössä. Unohdinko jotain? Kerro minulle!

Haluatko enemmän React Native -sisältöä? Tilaa sähköpostiluetteloni tai ota esittelyni React Native -kurssille (se on ilmainen!).