В настоящее время работаю над приложением React, которое в основном предназначено для редактирования содержания статей и сведений о продуктах на официальном сайте моей компании. После реализации некоторого нового синтаксиса из ES6 я просто не могу больше жить без него, он настолько интуитивно понятен, что даже не могу представить, как мы, разработчики JS, выживали без этих новых функций раньше.
Эта статья в основном предназначена для тех, кто разрабатывает на Javascript, но не знаком с ES6. Они не нужны при разработке Javascript, но всегда полезно знать что-то новое, что также может сэкономить ваше время. Я надеюсь, что они помогут вам в некоторых моментах; )
Вот несколько приемов, которые так полезны при разработке приложений React:
Литералы шаблонов
Прежде чем на самом деле внедрять литералы шаблонов, я просто чувствую, что это странный синтаксис, но когда мне нужно вставить некоторые переменные, чтобы сделать вызов AJAX с другим URL-адресом, стоит его изучить.
Скажем, мне нужно создать простую вспомогательную функцию, чтобы получить URL-адрес для запроса разных таблиц и идентификаторов элементов.
// Before ES6: var getQueryURL = function(table, id){ return '/' + table '/' + id; } // With ES6: const getQueryURL = (table, id) => `/${table}/${id}`
На самом деле здесь мы также используем const
и стрелочную функцию из ES6, я упомяну стрелочную функцию позже.
Деструктуризация объекта
Всякий раз, когда нам приходится иметь дело с реквизитами и состояниями в компонентах, гораздо элегантнее использовать деструктурирующее присваивание, чтобы сделать код читаемым, особенно вам не нужно писать много this.props.propName
или this.state.stateName
, чтобы просто передать все это.
Скажем, я просто хочу передать props
в render()
для рендеринга кнопки.
// Before ES6 in a really bad way to write: render(){ var name = props.name; var value = props.value; var disabled = props.disabled; return ( <button name={props.name} value={props.value} disabled={props.disabled} /> ) } // Before ES6 in a better way: render(){ var value = props.value; var name = props.name; var disabled = props.disabled; return ( <button name={name} value={value} disabled={disabled} /> ) } // With ES6 there is a much more better way render(){ const { value, name, disabled } = props; return ( <button name={name} value={value} disabled={disabled} /> ) }
Более того, мы глубоко сопоставляем свойства объектов.
Скажем, мы используем реактивный маршрутизатор и хотим получить строку запроса из URL-адреса и извлечь таблицу из реквизита, а также обновить форму.
// Before ES6: updateForm(){ var search= this.props.location.search; var table = this.props.fetchTable; ... } // With ES6: updateForm(){ const { location:{ search }, fetchTable: table } = this.props; }
В приведенном выше примере мы также переименовываем fetchTable
в table
, что является еще одним полезным приемом.
Стрелочные функции
Это первый синтаксис, который я изучил из ES6, который должен быть известен во всем мире. Поначалу это довольно запутанно, но в какой-то момент вы к этому привыкнете. Это имеет большое значение, если не писать function
для каждой функции.
Скажем, я хочу создать чистый функциональный компонент кнопки:
// Before ES6: function Button(props){ var name = props.name; var value = props.value; var disabled = props.disabled; return <button name={name} value={value} disabled={disabled}/> } // With ES6: const Button = (props) => { const { value, name, disabled } = props; return <button name={name} value={value} disabled={disabled}/> } // Or without object deconstructing, the curly brackets will be replaced by parentheses and the return will be omitted. const Button = props => ( <button name={props.name} value={props.value} disabled={props.disabled} /> )
Значения параметров по умолчанию
Я был очень удивлен, что Javascript не предоставляет синтаксис параметра по умолчанию до ES6. Эта функция помогает мне избежать typeError
, когда выборка данных является асинхронной и не была получена полностью, что весьма полезно.
Скажем, мне нужно получить заголовки из всех данных статей:
// Before ES6: function getTitles(articles){ if (articles === undefined){ articles = []; } return articles.map(function(article){ return article.title }) } // With ES6: const getTitles = (articles = []) => articles.map( a => a.title )
С помощью функции стрелки мы можем использовать одну строку вместо пяти, что так мило ❤
Расширенные свойства объекта
И последнее, но не менее важное: иногда мне нужно создать данные или добавить свойства к объектам с настраиваемыми ключами, вычисленные имена свойств пригодятся :)
Скажем, мне нужно добавить данные в список объектов, а ключ основан на имени таблицы в базе данных:
// Before ES6: function updateData(dataList, table, update){ var newDataList = dataList; newDataList[table] = update; ... } // With ES6: const updateData = (dataList, table, update) => { const newDataList = { ...dataList, [table]: update } ... }
Здесь мы также используем оператор распространения, который также очень удобен для присвоения новых свойств новому объекту или массиву!
Выше перечислены функции, которые я часто использую в разработке React. Я надеюсь, что вы узнали что-то новое, чего раньше не пробовали, и вам не терпится улучшить свое Javascript-приложение. Некоторые элементы синтаксиса могут быть довольно запутанными в начале, но в какой-то момент вы обнаружите, что они очень полезны и необходимы в Javascript.
Если вы хорошо знакомы с этим синтаксисом и хотите узнать больше о возможностях ES6, этот веб-сайт ES6-features — то, что вам нужно.
Спасибо за ваше чтение, и если есть какие-либо предложения или опечатки в этой статье, добро пожаловать оставлять свои комментарии :)