Мы начали изучать современный синтаксис JS, используемый в реакции, в прошлом блоге. Вот ссылка на этот блог. Мы продолжим наше путешествие, чтобы узнать больше о современном синтаксисе JS во второй части. Мы рассмотрим следующие темы -

  • Разрушение
  • Оператор спреда
  • Строка шаблона
  • Классы
  • Асинхронный/ожидание

Это ключевые концепции, которые вы будете использовать в коде React снова и снова. Если вы новичок в React, этот блог определенно поможет вам понять код и улучшить свои навыки.

Разрушение

Синтаксис разрушения помогает нам распаковывать значения как из объектов, так и из массивов. Это очень полезно, если мы хотим использовать несколько свойств большого объекта. Сначала мы узнаем о разрушении объекта.

Деструктуризация работает с аргументами функции. Мы можем передать объект функции и деструктурировать его в аргументах, чтобы получить нужные нам свойства.

Здесь мы берем только `зарплату` из объекта `человек`. Мы будем использовать этот синтаксис в реакции обычно, чтобы получить функции, которые нам нужны, из объекта реакции. Например

Мы можем добавить значения по умолчанию для разрушения. Он примет значение по умолчанию, если значение не передано или не присутствует в объекте. Мы также можем сделать переданный объект необязательным, назначив его `{}`.

Здесь мы делаем значение точности по умолчанию равным 2. Но нам все равно нужно передать объект как пустой объект, поскольку мы не сделали объект необязательным. Если мы можем сделать объект необязательным, сделав значение объекта равным `{}`. Это будет выглядеть следующим образом

Деструктуризация массива работает аналогичным образом

Деструктурирование массива можно использовать с оператором rest of, чтобы получить остальные значения в массиве.

Мы также можем пропустить значения в массиве, если хотим использовать `,,` .

Например, деструктуризация массива используется в React для получения состояния и его методов установки.

Оператор спреда

Полезно распространять объект или массив. С его помощью мы можем создавать копии массивов и объектов. Но имейте в виду, что все эти копии — поверхностные копии.

Здесь мы делаем копию массива элементов в newArray

Здесь мы делаем копию объекта person с добавлением к нему дополнительной собственности.

Строка шаблона

Строка шаблона помогает создавать шаблоны с динамическими значениями или выражениями. Они определяются с помощью обратных галочек. Мы можем сделать наши строки многострочными, если они являются шаблонными строками.

Здесь мы можем получить разные имена пользователей, вошедших в систему, со строками шаблона. Они очень полезны при создании динамического шаблона, который может отображаться с использованием различных значений. Мы также можем использовать выражения в строках шаблона.

Здесь мы можем создавать разные строки в зависимости от того, проверен ли пользователь или не использует выражение.

Классы

В JS все является объектом, даже функции являются объектами. Классы были введены в современный JS. Класс — это план, который определяет общее поведение и свойства группы объектов. Мы можем создавать несколько объектов, используя один и тот же класс. Мы можем определять новые классы, создавать объекты с использованием классов и даже расширять классы в современном JS.

Мы определяем класс Vehicle и расширяем его, чтобы определить класс Car. Мы также можем перезаписать функцию класса, если это необходимо. React использует классы для определения компонентов.

Асинхронный/ожидание

Всякий раз, когда в нашем коде есть асинхронные операции, нам приходится иметь дело с промисами. Обещание — это объект, который предоставляет данные позже, когда асинхронная операция завершена. Мы должны добавить вызов ‘.then’ для обработки данных, возвращаемых обещанием. Затем примет функцию обратного вызова.

Обычно нам приходится вкладывать несколько асинхронных операций, чтобы образовалась цепочка операций `.then`. Эта цепочка не очень читабельна и зацикливаться на такой цепочке сложнее.

В приведенном выше примере мы должны добавить цепочку «.then», поскольку «resp.json» также возвращает обещание.

Но с помощью async await мы можем избежать этих цепочек, и код станет более читаемым. Мы можем ждать асинхронного вызова. Await можно использовать только в асинхронных функциях. Когда мы добавим асинхронность в функцию по умолчанию, она вернет обещание. Имейте в виду, что этот синтаксис сделает его более читабельным, но асинхронная функция все равно будет возвращать обещание. Таким образом, приведенный выше пример будет выглядеть так:

Очень распространена практика оборачивать эти ожидания в блог `try catch` на случай ошибки, чтобы изящно ее обработать. Так что не забудьте обернуть их в try catch и обработать ошибки.

Поскольку мы изучили более современный синтаксис JS, связанный с React, вы будете чувствовать себя уверенно, читая и изучая код React и JS. Есть много других современных JS-синтаксисов, которые используются в React, но это те, с которыми вы будете сталкиваться чаще. Так что продолжайте практиковаться в этом, пытаясь написать код, и вы быстро станете мастером в этом.