От автора: известный принцип Парето 80-20 также верен, когда речь идет об обучении React ES6. В ES6 появилось более 75 новых функций, но из того, что я видел, мне было нужно менее 20% из них в более чем 80% случаев.
Примечание: просто чтобы избежать каких-либо недоразумений и не вдаваться в очень специфические подробности, JavaScript — это то же самое, что ECMAScript (или ES). ES6 = ES5 + некоторые новые функции, поэтому ES6 и ES5 — суть Javascript. Основное различие заключается в наборе поддерживаемых функций.
Два года назад для меня это было довольно запутанным, когда я впервые перешел от старого Angular 1 и «чистого» Javascript ES5, и увидел в некоторых пособия такие вещи, как функции стрелок или операторы деструктора. Было непонятно, что относится к React, а что к ES6.
На самом деле, в течение первой недели или около того, я был почти уверен, что мы можем написать что-то вроде {name} только в React.
Даже сегодня я не могу сказать, что предлагаю вам полное описание всех новых функций. Это всего лишь «материал» по ES6, который я видел в подавляющем большинстве в кодов React. Итак … с этого мы и начнем:
Let и const
В «старом» Javascript (что означает ES5), чтобы объявить переменную, мы использовали ключевое слово var. Учитывая некоторую магическую вещь под названием подъем Javascript, мы могли бы использовать переменную, прежде чем объявлять ее.
// ES5 console.log(myVar); // вывод без определения var myVar = 10;
Это могло привести к некоторому поведению. Больше нет. В ES6 через ключевые слова let или const вы должны явно объявить что-то перед тем, как это использовать.
// ES6 console.log(myVar) // ReferenceError myVar не определена let myVar = 10
Как вы можете представить, разница между const и let заключается в том, что вы не можете изменить константу после получения ее исходного значения.
// ES6 let x = 10 const y = 20 x = 25 // all is ok y = 30 // TypeError: Назначение переменной для константы.
Никаких больше точек с запятой
И ES6, и ECMAScript 6, и все связанные с ним инструменты прекрасно поддерживают автоматическую вставку точки с запятой. Как следствие, в настоящее время кодеки ECMAScript 6 могут избавить нас от необходимости добавлять точки с запятой почти везде с и убрать из кода некоторый беспорядок.
//ES5 var theNumber = 10; console.log(theNumber); //ES6 - можно обойтись без точек с запятой let theNumber = 10 console.log(theNumber)
Не совсем критическая функция, но наверняка полезная, особенно если вы в какой-то момент увлекались такими вещами, как CoffeeScript.
Функции стрелок
Чтобы создать функцию в ES5, вам нужно написать что-то вроде этого:
// ES5
var sum = function(a, b) { return a + b
}
В ES6 вы можете быстро написать что-то такое:
// ES6
const sum = (a, b) => {return a + b} И если у вас есть очень простая функция с одной строкой, вы даже можете опустить ключевое слово return:
// ES6
const sum = (a, b) => a + b // функция стрелки из одной строки автоматически выводит результат последнего использовавшегося значения
Еще одна вещь, о которой следует помнить — функции стрелок автоматически связаны с их верхней областью:
function DogWorldContext() { this.age = 0 setInterval(function growUp() { this.age++ console.log(this.age) }, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// будет выводить Nan каждую секунду, так как growUp это стандартная функция, она содержит собственный контекст ключевого слова this.
function DogWorldContext() { this.age = 0 setInterval(()=> { this.age++ console.log(this.age) }, 1000)
}
var worldWithArrowFunction = new DogWorldContext()
// выводит 1,2,3 ... каждую секунду
Функции стрелок не имеют этого. Этот контекст становится родительским, в нашем случае — DogWorldContext.
Операторы деструктора
Цитируя developer.mozilla.org, инструкции деструктора позволяют извлекать значения из массивов или свойства из объектов в разные переменные.
Весьма распространенным является необходимость извлечь атрибут из объекта в отдельный объект. Допустим, у нас есть следующий код:
// ES5; предположим, что this.props.user = {name: "Daniel", age : 32}
alert(this.props.user.name + " " + this.props.user.age);
Чтобы код было легче читать, мы могли бы сделать что-то вроде этого:
// ES5; предположим, что this.props.user = {name: "Daniel", age : 32}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);
Но с помощью ES6 мы могли бы использовать операторы деструктора и написать:
// ES6; предположим, что this.props.user = {name: "Daniel", age : 32}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)
Или одной строкой:
// ES6; предположим, что this.props.user = {name: "Daniel", age : 32}
const {name, age} = this.props.user
alert(name + " " + age)
Литералы объектов
Примерно согласовано с этой концепцией работают и Литералы объектов. Они позволяют нам определять пары ключ-значение с помощью меньшего количеством кода.
// ES5
str = "HELLO"
number = 20
obj = { str: str, number: number
}
В E6 это можно легко перевести в:
// ES6
str = "HELLO"
number = 20
obj = { str, number} // даст obj = {str: "HELLO", number: 20}
Классы, конструкторы и методы
В «старом Javascript» у нас не было ключевого слова class. Итак, чтобы создать простой класс Dog, вы можете применить обходное решение следующим образом:
// ES5
function Dog(name, weight){ this.name = name; this.weight = weight;
} Dog.prototype.speak = function(){ alert("Woof, woof … my name is: " + this.name);
}; // Устанавливаем новый объект с помощью ‘new’
var dog = new Dog("Spike", 25); // Вызываем методы наподобие this
dog.speak(); // предупрезжение “Woof, woof … my name is: Spike”
Вы также можете определить базовый объект и другие подходы, но суть в том, что раньше у нас не было class «из коробки». Теперь ES6 предоставляет нам эти возможности:
//ES6
class Dog { constructor(name, weight) { this.name = name this.weight = weight } speak() { alert("Woof, woof … my name is: " + this.name) }
}
const dog = new Dog("Spike", 25)
dog.speak()
Наследование классов и React
Как и в случае классов, в ES5 вы можете реализовать механизм наследования с помощью обходных решений. Но в ES6у нас есть ключевое слово extends.
// ES6 class Chihuahua extends Dog { shaking() { alert("look at me ! I’m shaking !") }
} const miniDog = new Chihuahua("Mini Spike", 1)
miniDog.shaking() // У меня есть собственный метод
miniDog.speak() // но я также унаследовал метода из верхних классов
Также, как и в случае ключевого слова class, extends — это только синтаксис, но он весьма полезен в коде React, поскольку позволяет нам перейти от следующего кода:
var Greeting = createReactClass({ render: function() { return <h1>Hello, {this.props.name}</h1>; }
});
к более чистой версии, наподобие:
class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}
Также имейте в виду, что если вы используете extends для определения компонентов React, метод getInitialState() заменяется в конструкторе класса простым инструктором this.sate = .. Больше узнать об этот вы можете здесь.
Фильтр
Допустим, у нас есть следующий массив.
const numbers = [5,1, 20, 90, 8, 22, 33, 9]
Если вы хотите создать новый массив только со значениями, превышающими 10, в ES5 вам понадобится цикл for или что-то подобное (например each() из jQuery).
Ну, в ES6 мы можем использовать функцию фильтра, чтобы перебрать все значения из массива и сохранить только те, которые отвечают требованиям функции.
//ES6 const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // выводит [20,90,22,33] // или используя функцию стрелки
const notDigits1 = numbers.filter( (value) => {return value > 9}
// мы также можем использовать возвращаемый результат по умолчанию или функции стрелки
const notDigits2 = numbers.filter( (value) => value > 9 )
… и Карта
Даже если это из «старого» ES5, карта является одной из самых недооцененных функций Javascript. Каждый раз, когда вам нужно перебрать массив, вы можете использовать карту. Допустим, что у нас есть тот же массив, что и в предыдущем примере.
const numbers = [5,1, 20, 90, 8, 22, 33, 9]
Если вам нужно просто отобразить массив, используйте карту:
numbers.map( (n) => console.log(n)) // и у вас также есть второй параметр, индекс numbers.map( (n, index) => console.log(n + ' is the ' + index + ' value from the array ') ) // или если мы хотим сгенерировать второй массив const double= numbers.map( (n) => n*2 )
Вы будете встречать map() в React снова и снова, каждый раз, когда вам нужно будет вывести список элементов:
render() { return( this.props.items.map( (item, key) => <p key={key}>{item}</p> )
}
Итак, это самые распространенные функции ES6, которые я использую при написании кода React. Отказ от ответственности: список очень предвзятый и субъективный 
Ни в коем случае я не имел намерения приуменьшить полезность других функций ES6. Как уже говорилось, существует множество других функций ES6, которые здесь не рассматриваются, но эти концепции должны позволить вам легко перейти от ES5 React к новому синтаксису ES6, и понять, что относится к React, а что к ES6. Будьте здоровы и удачного кодирования!
Источник: http://www.js-craft.io/
Редакция: Команда webformyself.
