Кратък преглед на ES6 за React Native Developers

Ако идвате в React Native и сте

  1. Ново в JavaScript
  2. Вече познаваме JavaScript, но не сме използвали ES6 / ES2015 + функции

тогава може да се почувствате малко изгубени на моменти. Синтаксисът може да изглежда странно, объркващо или понякога просто не знаете какво да търсите. Съставих кратък списък на най-често срещаните функции на ES6 +, които виждам в приложения и уроци на React Native. Това в никакъв случай не е всеобхватно, но трябва поне да започнете.

Променливи

От появата на JavaScript имахме var. Но сега имаме var, let и const. Всички те са валидни, но каква е разликата?

нека: Много подобен на var, но обхватът е различен. var е обхват на функцията (наличен и може да се променя навсякъде във функцията), докато let е блок обхват, което означава, че е достъпен само в този блок от код. Почти винаги използвам пуснато вместо var сега (честно казано не мога да си спомня последния път, когато използвах var).

const: Същият обхват (блок) като разрешен, но не можете да промените стойността му, например:

const name = 'Spencer';
name = 'Джони' // Не мога да направя това

Въпреки това (и това е нещо, за което в началото се обърках) можете да го промените, ако е от тип обект или масив, например:

информация за const = {
  име: „Спенсър“,
  компания: „Лаборатории на кормилото“,
};
info.job = 'Преподаване'; // Това е напълно валидно
const role = ['Ученик', 'Учител'];
roles.push ( "Разработчик"); // Хубаво е!

Искате повече информация?

  • позволявам
  • конст

Функции на стрелката

Синтаксис

Сега има нов начин за деклариране на функции в JavaScript, наречени функции със стрелки, и ще ги видите много, когато работите с React или React Native. Основната разлика между стандартните / старите функции и функциите със стрелки е в това, което е обвързано, така че понякога ще искате / трябва да използвате функция. Създаването на функция със стрелка е просто

const поздрав = (име) => {
  върнете 'Здравей,' + име + '!';
};
поздравят ( "Спенсър"); // Здравей, Спенсър!

Научете повече за синтаксиса на функция със стрелка

Форматиране на аргументи

С помощта на функции със стрелки можете да форматирате стрелките по няколко различни начина, всички от които обикновено се използват. Това са трите правила, които съм ангажирал в паметта.

1. Не се изискват аргументи = скоби

const поздрав = () => {
  връщане „Здравей!“;
};

2. Един аргумент = скоби по избор

const поздрав = (име) => {
  върнете 'Здравей,' + име + '!';
};
const поздрав = name => {
  върнете 'Здравей,' + име + '!';
};

3. Два или повече аргумента = необходими са скоби

const поздрав = (име, фирма) => {
  върнете "Здравей," + име + "!" + 'Как е' + компания + '?';
};

Научете повече за форматирането на аргументи

Аргументи по подразбиране

Това е един от любимите ми - изключително прост начин да зададете аргументи по подразбиране за вашите функции, като просто ги присвоите на стойност при именуване на аргумента. Ако аргументът бъде предаден, той ще използва аргумента, който предавате, в противен случай той ще се върне обратно по подразбиране.

const поздрав = (name = 'Приятел') => {
  върнете 'Здравей,' + име + '!';
};
поздрави (); // Здравей, приятелю!
поздравят ( "Спенсър"); // Здравей, Спенсър!

Научете повече за аргументите по подразбиране

Неявно връщане

Имате проста функция и ви е писнало да пишете къдрави скоби и връщания? Не се притеснявайте повече! Вече можете да се върнете неявно от функция, така

const поздрав = (име) => 'Здравейте,' + име + '!';
поздравят ( "Спенсър"); // Здравей, Спенсър!

Mmm запазени натискания на клавиши

Въпреки това става по-добре! Кажете, че искате да върнете обект от функция, можете да го правите така (често ще видите това при работа с Redux)

const getInfo = () => ({
  име: „Спенсър“,
  компания: „Лаборатории на кормилото“,
  работа: „Преподаване“,
});
getInfo (); // {name: 'Spencer', компания: 'Labson Labs', работа: 'Teaching'}

(забележете скобите, които обвиват обекта)

И накрая вие също можете да върнете компонент по много подобен начин като обекта, нека да демонстрирам

const Поздрав = ({name}) => (
  
     Здравейте, {name}! 
  
);

Отново обгръщаме компонента с скоби и не е нужно да правим връщане.

Научете повече за неявната възвръщаемост

обекти

Сега имаме няколко много удобни инструментариума (за които преди това щеше да е необходима външна библиотека), които улесняват работата с обекти в JavaScript.

разградено

Разрушаването ни позволява да „унищожим“ или разрушим обект, така че да имаме по-лесен достъп до информацията, която ни интересува. Да речем, че искаме да имаме достъп до някои данни за даден обект, в миналото би трябвало да направим следното

информация за const = {
  име: „Спенсър“,
  компания: „Лаборатории на кормилото“,
  местоположение: {
    град: „Нашвил“,
    щат: „Тенеси“,
  }
};
const име = info.name;
const city = info.location.city;
const state = info.location.state;

Това е добре, но сега можем да спестим малко време, определяйки променливите, които имат достъп до информацията, която ни интересува. Когато предавате реквизити около приложението React Native, обикновено е да имаме някои вложени данни и, както виждаме в града и държавата, в крайна сметка пишем много един и същ код. Можете да унищожите този обект за по-лесен достъп до данни.

информация за const = {
  име: „Спенсър“,
  компания: „Лаборатории на кормилото“,
  местоположение: {
    град: „Нашвил“,
    щат: „Тенеси“,
  }
};
const {име, местоположение} = информация;
const {град, щат} = местоположение;
// име е Спенсър
// град е Нашвил
// щата е Тенеси

Често ще видите това, когато получавате достъп до информация от реквизит, като този:

const Info = ({име, местоположение}) => (
  
     {name} живее в {location.city}, {location.state} 
  
);

Научете повече за унищожаването на обекти

Разпространение

Разпространението на обекти ни позволява да копираме информация от един обект в друг. Това е практика, която често ще видите, когато използвате Redux, поради нуждата от чисти функции. Нека да кажем, че имаме много хора, които работят в лаборатории за дръжки и всички имат една и съща основна информация. За да спестим време, ще копираме тази информация от „шаблона“ в информацията на даден човек.

const handlebarLabsInfo = {
  компания: „Лаборатории на кормилото“,
  местоположение: {
    град: „Нашвил“,
    щат: „Тенеси“,
  }
};
const spencerInfo = {
  ... handlebarLabsInfo,
  име: „Спенсър“,
}
console.log (spencerInfo); // {име: 'Spencer', компания: 'Landsbar Labs', местоположение: {city: 'Нашвил', щат: 'Tennessee'}}

Научете повече за разпространението на обекти

Strings

Литерали за шаблони

Друг мой любим любим. Забележете как по-рано или в някой от по-старите си код / ​​уроци виждате „Здравейте,„ + име + “!“ + „Как е„ + компания + “?“ Тези + знаци могат да бъдат болка за писане и аз лично знам, че винаги бих забравил интервал, като по този начин причинявам форматирането да изглежда. Литералните шаблони ни улесняват, защото можем много по-естествено да пишем низове с динамично съдържание.

Като използваме back ticks (``) за дефиниране на низа, след това можем да предадем променливи в $ {}. Нека само да ви покажа ...

const поздрав = (име, фирма) => {
  // върнете „Здравейте“, + име + „!“ + 'Как е' + компания + '?';
  връщане `Здравей, $ {name}! Как е $ {company}? `;
};

Толкова по-добре

Научете повече за шаблонните литерали

модули

За хората, които първо прескачат React Native, това може да е объркващо. Вероятно сте свикнали да виждате

export.greet = (име) => 'Здравейте,' + име + '!';
// ИЛИ
module.exports = (name) => 'Здравейте,' + име + '!';

и по същия начин действително да използвате този код:

const формалности = изисквам ('./ формалности');
formalities.greet ();
const поздрав = изисквам ('./ формалности');
поздрави ();

Вече имаме достъп до различен синтаксис на модул, който се възползва от ключовите думи за импортиране и експортиране. Нека конвертираме този първи експортен блок.

export const greet = (name) => 'Здравей,' + име + '!';
// ИЛИ
експортиране поздрав по подразбиране;

Тогава за достъп до този код, който бихме могли да използваме

import {поздрав} от './formalities';
// ИЛИ
импортирайте поздрав от „./formalities“;

Хубавото е, че можем да използваме както експорт, така и експорт по подразбиране заедно. Има много повече неща, които можете да направите с ES6 модулите и определено бих ви препоръчал да го проверите. изискват все още има своето място, но рядко ги използвам сега

  • Научете повече за импортирането
  • Научете повече за износа

Обобщавайки

Има много страхотни неща в ES6 и по-нататък, голяма част от тях не покрих тук. Това са само най-често срещаните, които виждам в употреба. Забравих ли нещо? Кажи ми!

Искате повече съдържание, свързано с React Native? Регистрирайте се за моя имейл списък или вземете моето интро в курса React Native (безплатно е!).