От автора: известный принцип Парето 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, мы могли бы использовать переменную, прежде чем объявлять ее.
|
1 2 3 |
// ES5 console.log(myVar); // вывод без определения var myVar = 10; |
Это могло привести к некоторому поведению. Больше нет. В ES6 через ключевые слова let или const вы должны явно объявить что-то перед тем, как это использовать.
|
1 2 3 |
// ES6 console.log(myVar) // ReferenceError myVar не определена let myVar = 10 |
Как вы можете представить, разница между const и let заключается в том, что вы не можете изменить константу после получения ее исходного значения.
|
1 2 3 4 5 |
// ES6 let x = 10 const y = 20 x = 25 // all is ok y = 30 // TypeError: Назначение переменной для константы. |
Никаких больше точек с запятой
И ES6, и ECMAScript 6, и все связанные с ним инструменты прекрасно поддерживают автоматическую вставку точки с запятой. Как следствие, в настоящее время кодеки ECMAScript 6 могут избавить нас от необходимости добавлять точки с запятой почти везде с и убрать из кода некоторый беспорядок.
|
1 2 3 4 5 6 7 |
//ES5 var theNumber = 10; console.log(theNumber); //ES6 - можно обойтись без точек с запятой let theNumber = 10 console.log(theNumber) |
Не совсем критическая функция, но наверняка полезная, особенно если вы в какой-то момент увлекались такими вещами, как CoffeeScript.
Функции стрелок
Чтобы создать функцию в ES5, вам нужно написать что-то вроде этого:
|
1 2 3 4 |
// ES5 var sum = function(a, b) { return a + b } |
В ES6 вы можете быстро написать что-то такое:
|
1 2 3 4 5 |
// ES6 const sum = (a, b) => {return a + b} И если у вас есть очень простая функция с одной строкой, вы даже можете опустить ключевое слово return: // ES6 const sum = (a, b) => a + b // функция стрелки из одной строки автоматически выводит результат последнего использовавшегося значения |
Еще одна вещь, о которой следует помнить — функции стрелок автоматически связаны с их верхней областью:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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, инструкции деструктора позволяют извлекать значения из массивов или свойства из объектов в разные переменные.
Весьма распространенным является необходимость извлечь атрибут из объекта в отдельный объект. Допустим, у нас есть следующий код:
|
1 2 |
// ES5; предположим, что this.props.user = {name: "Daniel", age : 32} alert(this.props.user.name + " " + this.props.user.age); |
Чтобы код было легче читать, мы могли бы сделать что-то вроде этого:
|
1 2 3 4 |
// ES5; предположим, что this.props.user = {name: "Daniel", age : 32} var name = this.props.user.name; var age = this.props.user.age; alert(name + " " + age); |
Но с помощью ES6 мы могли бы использовать операторы деструктора и написать:
|
1 2 3 4 |
// ES6; предположим, что this.props.user = {name: "Daniel", age : 32} const {name} = this.props.user const {age} = this.props.user alert(name + " " + age) |
Или одной строкой:
|
1 2 3 |
// ES6; предположим, что this.props.user = {name: "Daniel", age : 32} const {name, age} = this.props.user alert(name + " " + age) |
Литералы объектов
Примерно согласовано с этой концепцией работают и Литералы объектов. Они позволяют нам определять пары ключ-значение с помощью меньшего количеством кода.
|
1 2 3 4 5 6 7 |
// ES5 str = "HELLO" number = 20 obj = { str: str, number: number } |
В E6 это можно легко перевести в:
|
1 2 3 4 |
// ES6 str = "HELLO" number = 20 obj = { str, number} // даст obj = {str: "HELLO", number: 20} |
Классы, конструкторы и методы
В «старом Javascript» у нас не было ключевого слова class. Итак, чтобы создать простой класс Dog, вы можете применить обходное решение следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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 предоставляет нам эти возможности:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//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.
|
1 2 3 4 5 6 7 8 9 10 |
// 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, поскольку позволяет нам перейти от следующего кода:
|
1 2 3 4 5 |
var Greeting = createReactClass({ render: function() { return <h1>Hello, {this.props.name}</h1>; } }); |
к более чистой версии, наподобие:
|
1 2 3 4 5 |
class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } |
Также имейте в виду, что если вы используете extends для определения компонентов React, метод getInitialState() заменяется в конструкторе класса простым инструктором this.sate = .. Больше узнать об этот вы можете здесь.
Фильтр
Допустим, у нас есть следующий массив.
|
1 |
const numbers = [5,1, 20, 90, 8, 22, 33, 9] |
Если вы хотите создать новый массив только со значениями, превышающими 10, в ES5 вам понадобится цикл for или что-то подобное (например each() из jQuery).
Ну, в ES6 мы можем использовать функцию фильтра, чтобы перебрать все значения из массива и сохранить только те, которые отвечают требованиям функции.
|
1 2 3 4 5 6 7 8 9 |
//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. Каждый раз, когда вам нужно перебрать массив, вы можете использовать карту. Допустим, что у нас есть тот же массив, что и в предыдущем примере.
|
1 |
const numbers = [5,1, 20, 90, 8, 22, 33, 9] |
Если вам нужно просто отобразить массив, используйте карту:
|
1 2 3 4 5 |
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 снова и снова, каждый раз, когда вам нужно будет вывести список элементов:
|
1 2 3 4 5 |
render() { return( this.props.items.map( (item, key) => <p key={key}>{item}</p> ) } |
Итак, это самые распространенные функции ES6, которые я использую при написании кода React. Отказ от ответственности: список очень предвзятый и субъективный 🙂 Ни в коем случае я не имел намерения приуменьшить полезность других функций ES6. Как уже говорилось, существует множество других функций ES6, которые здесь не рассматриваются, но эти концепции должны позволить вам легко перейти от ES5 React к новому синтаксису ES6, и понять, что относится к React, а что к ES6. Будьте здоровы и удачного кодирования!
Источник: //www.js-craft.io/
Редакция: Команда webformyself.
